Skip to content

Commit fc282e7

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Add base notification settings page to deployment
1 parent e164b1e commit fc282e7

File tree

4 files changed

+329
-0
lines changed

4 files changed

+329
-0
lines changed

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

Lines changed: 314 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,314 @@
1+
import type { Interpolation, Theme } from "@emotion/react";
2+
import EmailIcon from "@mui/icons-material/EmailOutlined";
3+
import WebhookIcon from "@mui/icons-material/LanguageOutlined";
4+
import Card from "@mui/material/Card";
5+
import Divider from "@mui/material/Divider";
6+
import List from "@mui/material/List";
7+
import ListItem from "@mui/material/ListItem";
8+
import ListItemIcon from "@mui/material/ListItemIcon";
9+
import ListItemText, { listItemTextClasses } from "@mui/material/ListItemText";
10+
import Switch from "@mui/material/Switch";
11+
import TextField from "@mui/material/TextField";
12+
import ToggleButton from "@mui/material/ToggleButton";
13+
import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
14+
import type { FC } from "react";
15+
import { FormFields, FormSection, HorizontalForm } from "components/Form/Form";
16+
import { Section } from "pages/UserSettingsPage/Section";
17+
import Button from "@mui/material/Button";
18+
import { Stack } from "components/Stack/Stack";
19+
20+
export const NotificationsPage: FC = () => {
21+
return (
22+
<Section
23+
title="Notification Targets"
24+
description="Control delivery methods for notifications. Settings applied to this deployment."
25+
layout="fluid"
26+
>
27+
<HorizontalForm>
28+
<FormSection
29+
title="Webhook Target"
30+
description="A webhook target is a URL that you can use to receive your events through an API."
31+
>
32+
<FormFields>
33+
<TextField
34+
label="Webhook Target URL"
35+
placeholder="https://myapi.com/events"
36+
helperText="Leave this empty to disable webhook notifications."
37+
/>
38+
<Stack direction="row" spacing={1}>
39+
<Button>Reset</Button>
40+
<Button variant="contained" color="primary">
41+
Save URL
42+
</Button>
43+
</Stack>
44+
</FormFields>
45+
</FormSection>
46+
47+
<FormSection
48+
title="Events"
49+
description="Update the events to use the correct targets for each notification."
50+
>
51+
<FormFields>
52+
<Card
53+
variant="outlined"
54+
css={{ background: "transparent", width: "100%" }}
55+
>
56+
<List>
57+
<ListItem css={styles.listHeader}>
58+
<ListItemIcon>
59+
<Switch size="small" />
60+
</ListItemIcon>
61+
<ListItemText
62+
css={styles.listItemText}
63+
primary="User events"
64+
/>
65+
</ListItem>
66+
<ListItem>
67+
<ListItemIcon>
68+
<Switch size="small" />
69+
</ListItemIcon>
70+
<ListItemText
71+
css={styles.listItemText}
72+
primary="User added"
73+
/>
74+
<ToggleButtonGroup
75+
value="email"
76+
size="small"
77+
aria-label="Targe"
78+
css={styles.toggleGroup}
79+
>
80+
<ToggleButton
81+
value="email"
82+
key="email"
83+
css={styles.toggleButton}
84+
>
85+
<EmailIcon />
86+
</ToggleButton>
87+
<ToggleButton
88+
value="webhook"
89+
key="webhook"
90+
css={styles.toggleButton}
91+
>
92+
<WebhookIcon />
93+
</ToggleButton>
94+
</ToggleButtonGroup>
95+
</ListItem>
96+
<Divider />
97+
<ListItem>
98+
<ListItemIcon>
99+
<Switch size="small" />
100+
</ListItemIcon>
101+
<ListItemText
102+
css={styles.listItemText}
103+
primary="User removed"
104+
/>
105+
<ToggleButtonGroup
106+
value="email"
107+
size="small"
108+
aria-label="Targe"
109+
css={styles.toggleGroup}
110+
>
111+
<ToggleButton
112+
value="email"
113+
key="email"
114+
css={styles.toggleButton}
115+
>
116+
<EmailIcon />
117+
</ToggleButton>
118+
<ToggleButton
119+
value="webhook"
120+
key="webhook"
121+
css={styles.toggleButton}
122+
>
123+
<WebhookIcon />
124+
</ToggleButton>
125+
</ToggleButtonGroup>
126+
</ListItem>
127+
<Divider />
128+
<ListItem>
129+
<ListItemIcon>
130+
<Switch size="small" />
131+
</ListItemIcon>
132+
<ListItemText
133+
css={styles.listItemText}
134+
primary="User suspended"
135+
/>
136+
<ToggleButtonGroup
137+
value="webhook"
138+
size="small"
139+
aria-label="Targe"
140+
css={styles.toggleGroup}
141+
>
142+
<ToggleButton
143+
value="email"
144+
key="email"
145+
css={styles.toggleButton}
146+
>
147+
<EmailIcon />
148+
</ToggleButton>
149+
<ToggleButton
150+
value="webhook"
151+
key="webhook"
152+
css={styles.toggleButton}
153+
>
154+
<WebhookIcon />
155+
</ToggleButton>
156+
</ToggleButtonGroup>
157+
</ListItem>
158+
</List>
159+
</Card>
160+
161+
<Card
162+
variant="outlined"
163+
css={{ background: "transparent", width: "100%" }}
164+
>
165+
<List>
166+
<ListItem css={styles.listHeader}>
167+
<ListItemIcon>
168+
<Switch size="small" />
169+
</ListItemIcon>
170+
<ListItemText
171+
css={styles.listItemText}
172+
primary="Workspace events"
173+
/>
174+
</ListItem>
175+
<ListItem>
176+
<ListItemIcon>
177+
<Switch size="small" />
178+
</ListItemIcon>
179+
<ListItemText
180+
css={styles.listItemText}
181+
primary="Dormancy"
182+
secondary="When a workspace is marked as dormant"
183+
/>
184+
<ToggleButtonGroup
185+
value="email"
186+
size="small"
187+
aria-label="Targe"
188+
css={styles.toggleGroup}
189+
>
190+
<ToggleButton
191+
value="email"
192+
key="email"
193+
css={styles.toggleButton}
194+
>
195+
<EmailIcon />
196+
</ToggleButton>
197+
<ToggleButton
198+
value="webhook"
199+
key="webhook"
200+
css={styles.toggleButton}
201+
>
202+
<WebhookIcon />
203+
</ToggleButton>
204+
</ToggleButtonGroup>
205+
</ListItem>
206+
<Divider />
207+
<ListItem>
208+
<ListItemIcon>
209+
<Switch size="small" />
210+
</ListItemIcon>
211+
<ListItemText
212+
css={styles.listItemText}
213+
primary="Deletion"
214+
secondary="When a workspace is marked for deletion"
215+
/>
216+
<ToggleButtonGroup
217+
value="email"
218+
size="small"
219+
aria-label="Targe"
220+
css={styles.toggleGroup}
221+
>
222+
<ToggleButton
223+
value="email"
224+
key="email"
225+
css={styles.toggleButton}
226+
>
227+
<EmailIcon />
228+
</ToggleButton>
229+
<ToggleButton
230+
value="webhook"
231+
key="webhook"
232+
css={styles.toggleButton}
233+
>
234+
<WebhookIcon />
235+
</ToggleButton>
236+
</ToggleButtonGroup>
237+
</ListItem>
238+
<Divider />
239+
<ListItem>
240+
<ListItemIcon>
241+
<Switch size="small" />
242+
</ListItemIcon>
243+
<ListItemText
244+
css={styles.listItemText}
245+
primary="Build failure"
246+
secondary="When a workspace fails to build"
247+
/>
248+
<ToggleButtonGroup
249+
value="webhook"
250+
size="small"
251+
aria-label="Targe"
252+
css={styles.toggleGroup}
253+
>
254+
<ToggleButton
255+
value="email"
256+
key="email"
257+
css={styles.toggleButton}
258+
>
259+
<EmailIcon />
260+
</ToggleButton>
261+
<ToggleButton
262+
value="webhook"
263+
key="webhook"
264+
css={styles.toggleButton}
265+
>
266+
<WebhookIcon />
267+
</ToggleButton>
268+
</ToggleButtonGroup>
269+
</ListItem>
270+
</List>
271+
</Card>
272+
</FormFields>
273+
</FormSection>
274+
</HorizontalForm>
275+
</Section>
276+
);
277+
};
278+
279+
export default NotificationsPage;
280+
281+
const styles = {
282+
listHeader: (theme) => ({
283+
background: theme.palette.background.paper,
284+
borderBottom: `1px solid ${theme.palette.divider}`,
285+
}),
286+
listItemText: {
287+
[`& .${listItemTextClasses.primary}`]: {
288+
fontSize: 14,
289+
fontWeight: 500,
290+
},
291+
[`& .${listItemTextClasses.secondary}`]: {
292+
fontSize: 14,
293+
},
294+
},
295+
toggleGroup: (theme) => ({
296+
border: `1px solid ${theme.palette.divider}`,
297+
borderRadius: 4,
298+
}),
299+
toggleButton: (theme) => ({
300+
border: 0,
301+
borderRadius: 4,
302+
fontSize: 16,
303+
padding: "4px 8px",
304+
color: theme.palette.text.disabled,
305+
306+
"&:hover": {
307+
color: theme.palette.text.primary,
308+
},
309+
310+
"& svg": {
311+
fontSize: "inherit",
312+
},
313+
}),
314+
} as Record<string, Interpolation<Theme>>;

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import HubOutlinedIcon from "@mui/icons-material/HubOutlined";
33
import InsertChartIcon from "@mui/icons-material/InsertChart";
44
import LaunchOutlined from "@mui/icons-material/LaunchOutlined";
55
import LockRounded from "@mui/icons-material/LockOutlined";
6+
import NotificationsIcon from "@mui/icons-material/NotificationsNoneOutlined";
67
import Globe from "@mui/icons-material/PublicOutlined";
78
import ApprovalIcon from "@mui/icons-material/VerifiedUserOutlined";
89
import VpnKeyOutlined from "@mui/icons-material/VpnKeyOutlined";
@@ -47,6 +48,9 @@ export const Sidebar: FC = () => {
4748
<SidebarNavItem href="observability" icon={InsertChartIcon}>
4849
Observability
4950
</SidebarNavItem>
51+
<SidebarNavItem href="notifications" icon={NotificationsIcon}>
52+
Notifications
53+
</SidebarNavItem>
5054
</BaseSidebar>
5155
);
5256
};

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

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -110,6 +110,9 @@ const DeploymentSettingsNavigation: FC<DeploymentSettingsNavigationProps> = ({
110110
<SidebarNavSubItem href={linkToAuditing.slice(1)}>
111111
Auditing
112112
</SidebarNavSubItem>
113+
<SidebarNavSubItem href="notifications">
114+
Notifications
115+
</SidebarNavSubItem>
113116
</Stack>
114117
)}
115118
</div>

‎site/src/router.tsx

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -262,6 +262,13 @@ const WorkspaceProxyHealthPage = lazy(
262262
const ProvisionerDaemonsHealthPage = lazy(
263263
() => import("./pages/HealthPage/ProvisionerDaemonsPage"),
264264
);
265+
const UserNotificationsPage = lazy(
266+
() => import("./pages/UserSettingsPage/NotificationsPage/NotificationsPage"),
267+
);
268+
const DeployNotificationsPage = lazy(
269+
() =>
270+
import("./pages/DeploySettingsPage/NotificationsPage/NotificationsPage"),
271+
);
265272

266273
const RoutesWithSuspense = () => {
267274
return (
@@ -411,6 +418,7 @@ export const router = createBrowserRouter(
411418
<Route path="users/create" element={<CreateUserPage />} />
412419
{groupsRouter()}
413420
<Route path="audit" element={<AuditPage />} />
421+
<Route path="notifications" element={<DeployNotificationsPage />} />
414422
</Route>
415423

416424
<Route path="/settings" element={<UserSettingsLayout />}>

0 commit comments

Comments
 (0)