Skip to content

Commit af6a8d0

Browse files
elizabetdevelizabetdev
authored
Refactor: Remove bootstrap, adopt semantic tokens, and improve Mantine UI usage (#1347)
1 parent a7e150c commit af6a8d0

File tree

118 files changed

+2824
-2066
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

118 files changed

+2824
-2066
lines changed

‎.changeset/semantic-color-tokens.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@hyperdx/app": minor
3+
---
4+
5+
feat: Remove `bootstrap`, `react-bootstrap` and unused `react-bootstrap-range-slider`, adopt semantic tokens, and improve Mantine UI usage

‎packages/app/package.json‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@
5050
"@uiw/codemirror-themes": "^4.23.3",
5151
"@uiw/react-codemirror": "^4.23.3",
5252
"@xyflow/react": "^12.9.0",
53-
"bootstrap": "^5.1.3",
5453
"chrono-node": "^2.7.8",
5554
"classnames": "^2.3.1",
5655
"crypto-js": "^4.2.0",
@@ -76,8 +75,6 @@
7675
"nuqs": "^1.17.0",
7776
"object-hash": "^3.0.0",
7877
"react": "18.3.1",
79-
"react-bootstrap": "^2.4.0",
80-
"react-bootstrap-range-slider": "^3.0.8",
8178
"react-copy-to-clipboard": "^5.1.0",
8279
"react-dom": "18.3.1",
8380
"react-error-boundary": "^3.1.4",

‎packages/app/pages/_app.tsx‎

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import Head from 'next/head';
55
import { NextAdapter } from 'next-query-params';
66
import randomUUID from 'crypto-randomuuid';
77
import { enableMapSet } from 'immer';
8-
import SSRProvider from 'react-bootstrap/SSRProvider';
98
import { QueryParamProvider } from 'use-query-params';
109
import HyperDX from '@hyperdx/browser';
1110
import { ColorSchemeScript } from '@mantine/core';
@@ -96,13 +95,11 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
9695
}, []);
9796

9897
useEffect(() => {
99-
document.documentElement.className =
100-
userPreferences.theme === 'dark' ? 'hdx-theme-dark' : 'hdx-theme-light';
10198
// TODO: Remove after migration to Mantine
10299
document.body.style.fontFamily = userPreferences.font
103100
? `"${userPreferences.font}", sans-serif`
104101
: '"IBM Plex Mono"';
105-
}, [userPreferences.theme, userPreferences.font]);
102+
}, [userPreferences.font]);
106103

107104
const getLayout = Component.getLayout ?? (page => page);
108105

@@ -117,23 +114,26 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
117114
/>
118115
<meta name="theme-color" content="#25292e"></meta>
119116
<meta name="google" content="notranslate" />
120-
<ColorSchemeScript forceColorScheme="dark" />
117+
<ColorSchemeScript
118+
forceColorScheme={userPreferences.theme === 'dark' ? 'dark' : 'light'}
119+
/>
121120
</Head>
122121

123-
<SSRProvider>
124-
<HDXQueryParamProvider>
125-
<QueryParamProvider adapter={NextAdapter}>
126-
<QueryClientProvider client={queryClient}>
127-
<ThemeWrapper fontFamily={userPreferences.font}>
128-
{getLayout(<Component {...pageProps} />)}
129-
{confirmModal}
130-
</ThemeWrapper>
131-
<ReactQueryDevtools initialIsOpen={true} />
132-
{background}
133-
</QueryClientProvider>
134-
</QueryParamProvider>
135-
</HDXQueryParamProvider>
136-
</SSRProvider>
122+
<HDXQueryParamProvider>
123+
<QueryParamProvider adapter={NextAdapter}>
124+
<QueryClientProvider client={queryClient}>
125+
<ThemeWrapper
126+
fontFamily={userPreferences.font}
127+
colorScheme={userPreferences.theme === 'dark' ? 'dark' : 'light'}
128+
>
129+
{getLayout(<Component {...pageProps} />)}
130+
{confirmModal}
131+
</ThemeWrapper>
132+
<ReactQueryDevtools initialIsOpen={true} />
133+
{background}
134+
</QueryClientProvider>
135+
</QueryParamProvider>
136+
</HDXQueryParamProvider>
137137
</React.Fragment>
138138
);
139139
}

‎packages/app/src/AlertsPage.tsx‎

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ function AlertHistoryCardList({ history }: { history: AlertHistory[] }) {
5858
return (
5959
<div className={styles.historyCardWrapper}>
6060
{paddingItems.map((_, index) => (
61-
<Tooltip label="No data" color="dark" withArrow key={index}>
61+
<Tooltip label="No data" withArrow key={index}>
6262
<div className={styles.historyCard} />
6363
</Tooltip>
6464
))}
@@ -84,7 +84,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
8484
{alert.dashboard?.name}
8585
{tileName ? (
8686
<>
87-
<i className="bi bi-chevron-right fs-8 mx-1 text-slate-400" />
87+
<i className="bi bi-chevron-right fs-8 mx-1 " />
8888
{tileName}
8989
</>
9090
) : null}
@@ -123,7 +123,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
123123
<>
124124
If value is {alert.thresholdType === 'above' ? 'over' : 'under'}{' '}
125125
<span className="fw-bold">{alert.threshold}</span>
126-
<span className="text-slate-400">&middot;</span>
126+
<span>&middot;</span>
127127
</>
128128
);
129129
}, [alert]);
@@ -172,16 +172,16 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
172172
className={styles.alertLink}
173173
title={linkTitle}
174174
>
175-
<i className={`bi ${alertIcon} text-slate-200 me-2 fs-8`} />
175+
<i className={`bi ${alertIcon} me-2 fs-8`} />
176176
{alertName}
177177
</Link>
178178
</div>
179-
<div className="text-slate-400 fs-8 d-flex gap-2">
179+
<div className="fs-8 d-flex gap-2">
180180
{alertType}
181181
{notificationMethod}
182182
{alert.createdBy && (
183183
<>
184-
<span className="text-slate-400">&middot;</span>
184+
<span>&middot;</span>
185185
<span>
186186
Created by {alert.createdBy.name || alert.createdBy.email}
187187
</span>
@@ -219,7 +219,7 @@ function AlertCardList({ alerts }: { alerts: AlertsPageItem[] }) {
219219
<i className="bi bi-check-lg"></i> OK
220220
</div>
221221
{okData.length === 0 && (
222-
<div className="text-center text-slate-400 my-4 fs-8">No alerts</div>
222+
<div className="text-center my-4 fs-8">No alerts</div>
223223
)}
224224
{okData.map((alert, index) => (
225225
<AlertDetails key={index} alert={alert} />
@@ -243,7 +243,7 @@ export default function AlertsPage() {
243243
<div className="my-4">
244244
<Container maw={1500}>
245245
<Alert
246-
icon={<i className="bi bi-info-circle-fill text-slate-400" />}
246+
icon={<i className="bi bi-info-circle-fill " />}
247247
color="gray"
248248
py="xs"
249249
mt="md"
@@ -259,19 +259,15 @@ export default function AlertsPage() {
259259
from dashboard charts and saved searches.
260260
</Alert>
261261
{isLoading ? (
262-
<div className="text-center text-slate-400 my-4 fs-8">
263-
Loading...
264-
</div>
262+
<div className="text-center my-4 fs-8">Loading...</div>
265263
) : isError ? (
266-
<div className="text-center text-slate-400 my-4 fs-8">Error</div>
264+
<div className="text-center my-4 fs-8">Error</div>
267265
) : alerts?.length ? (
268266
<>
269267
<AlertCardList alerts={alerts} />
270268
</>
271269
) : (
272-
<div className="text-center text-slate-400 my-4 fs-8">
273-
No alerts created yet
274-
</div>
270+
<div className="text-center my-4 fs-8">No alerts created yet</div>
275271
)}
276272
</Container>
277273
</div>

‎packages/app/src/AppNav.components.tsx‎

Lines changed: 22 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,8 @@ export const AppNavContext = React.createContext<{
3333

3434
export const AppNavCloudBanner = () => {
3535
return (
36-
<div className="my-3 bg-hdx-dark rounded p-2 text-center">
37-
<span className="text-slate-300 fs-8">
38-
Ready to deploy on ClickHouse Cloud?
39-
</span>
36+
<div className="my-3 bg-muted rounded p-2 text-center">
37+
<span className="fs-8">Ready to deploy on ClickHouse Cloud?</span>
4038
<div className="mt-2 mb-2">
4139
<Link
4240
href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started#deploy-with-clickhouse-cloud"
@@ -84,16 +82,9 @@ export const AppNavUserMenu = ({
8482
<Menu.Target>
8583
<Paper
8684
data-testid="user-menu-trigger"
87-
m="sm"
88-
mt={8}
89-
px={8}
90-
py={4}
91-
radius="md"
92-
{...(isCollapsed && {
93-
p: 2,
94-
bg: 'transparent',
85+
className={cx(styles.userMenuTrigger, {
86+
[styles.userMenuTriggerCollapsed]: isCollapsed,
9587
})}
96-
className={styles.appNavMenu}
9788
>
9889
<Group gap="xs" wrap="nowrap" miw={0}>
9990
<Avatar size="sm" radius="xl" color="green">
@@ -141,7 +132,7 @@ export const AppNavUserMenu = ({
141132
</Text>
142133
</div>
143134
</Tooltip>
144-
<Icon name="chevron-right" className="fs-8 text-slate-400" />
135+
<Icon name="chevron-right" className="fs-8 " />
145136
</>
146137
)}
147138
</Group>
@@ -213,21 +204,13 @@ export const AppNavHelpMenu = ({
213204
] = useDisclosure(false);
214205

215206
// const isTeamHasNoData = useIsTeamHasNoData();
216-
const size = 28;
217207

218208
return (
219209
<>
220210
<Paper
221-
mb={8}
222-
ml="sm"
223-
withBorder
224-
w={size}
225-
h={size}
226-
radius="xl"
227-
{...(isCollapsed && {
228-
ml: 'sm',
211+
className={cx(styles.helpMenuTrigger, {
212+
[styles.helpMenuTriggerCollapsed]: isCollapsed,
229213
})}
230-
className={styles.appNavMenu}
231214
>
232215
<Menu
233216
withArrow
@@ -237,12 +220,7 @@ export const AppNavHelpMenu = ({
237220
>
238221
<Menu.Target>
239222
<UnstyledButton data-testid="help-menu-trigger" w="100%">
240-
<Group
241-
align="center"
242-
justify="center"
243-
h={size}
244-
className="text-slate-200 "
245-
>
223+
<Group align="center" justify="center" h={28}>
246224
<Icon name="question-lg" />
247225
</Group>
248226
</UnstyledButton>
@@ -251,7 +229,7 @@ export const AppNavHelpMenu = ({
251229
<Menu.Label>
252230
Help{' '}
253231
{version && (
254-
<Text size="xs" c="gray.7" component="span">
232+
<Text size="xs" component="span">
255233
v{version}
256234
</Text>
257235
)}
@@ -295,15 +273,15 @@ export const AppNavHelpMenu = ({
295273
export const AppNavLink = ({
296274
className,
297275
label,
298-
iconName,
276+
icon,
299277
href,
300278
isExpanded,
301279
onToggle,
302280
isBeta,
303281
}: {
304282
className?: string;
305283
label: React.ReactNode;
306-
iconName: string;
284+
icon: React.ReactNode;
307285
href: string;
308286
isExpanded?: boolean;
309287
onToggle?: () => void;
@@ -320,37 +298,26 @@ export const AppNavLink = ({
320298
data-testid={testId}
321299
href={href}
322300
className={cx(
301+
styles.listLink,
302+
{ [styles.listLinkActive]: pathname?.includes(href) },
323303
className,
324-
'text-decoration-none d-flex justify-content-between align-items-center fs-7 text-muted-hover',
325-
{ 'fw-600 text-success': pathname?.includes(href) },
326304
)}
305+
style={{ display: 'flex', alignItems: 'center' }}
327306
>
328-
<span>
329-
<i className={`bi ${iconName} pe-2 text-slate-300`} />{' '}
330-
{!isCollapsed && (
331-
<span>
332-
{label}
333-
{isBeta && (
334-
<Badge
335-
size="xs"
336-
ms="xs"
337-
color="gray.4"
338-
autoContrast
339-
radius="sm"
340-
className="align-text-bottom"
341-
>
342-
Beta
343-
</Badge>
344-
)}
345-
</span>
346-
)}
307+
<span style={{ display: 'flex', alignItems: 'center' }}>
308+
<span className={styles.linkIcon}>{icon}</span>
309+
{!isCollapsed && <span>{label}</span>}
347310
</span>
348311
</Link>
312+
{!isCollapsed && isBeta && (
313+
<Badge size="xs" radius="sm" color="gray" style={{ marginRight: 8 }}>
314+
Beta
315+
</Badge>
316+
)}
349317
{!isCollapsed && onToggle && (
350318
<ActionIcon
351319
data-testid={`${testId}-toggle`}
352320
variant="subtle"
353-
color="dark.2"
354321
size="sm"
355322
onClick={onToggle}
356323
>

0 commit comments

Comments
 (0)