Refactor: Remove bootstrap, adopt semantic tokens, and improve Mantine UI usage

.changeset/semantic-color-tokens.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": minor
+---
+
+feat: Remove `bootstrap`, `react-bootstrap` and unused `react-bootstrap-range-slider`, adopt semantic tokens, and improve Mantine UI usage

packages/app/package.json

@@ -50,7 +50,6 @@
     "@uiw/codemirror-themes": "^4.23.3",
     "@uiw/react-codemirror": "^4.23.3",
     "@xyflow/react": "^12.9.0",
-    "bootstrap": "^5.1.3",
     "chrono-node": "^2.7.8",
     "classnames": "^2.3.1",
     "crypto-js": "^4.2.0",
@@ -76,8 +75,6 @@
     "nuqs": "^1.17.0",
     "object-hash": "^3.0.0",
     "react": "18.3.1",
-    "react-bootstrap": "^2.4.0",
-    "react-bootstrap-range-slider": "^3.0.8",
     "react-copy-to-clipboard": "^5.1.0",
     "react-dom": "18.3.1",
     "react-error-boundary": "^3.1.4",

packages/app/pages/_app.tsx

@@ -5,7 +5,6 @@ import Head from 'next/head';
 import { NextAdapter } from 'next-query-params';
 import randomUUID from 'crypto-randomuuid';
 import { enableMapSet } from 'immer';
-import SSRProvider from 'react-bootstrap/SSRProvider';
 import { QueryParamProvider } from 'use-query-params';
 import HyperDX from '@hyperdx/browser';
 import { ColorSchemeScript } from '@mantine/core';
@@ -96,13 +95,11 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
   }, []);
 
   useEffect(() => {
-    document.documentElement.className =
-      userPreferences.theme === 'dark' ? 'hdx-theme-dark' : 'hdx-theme-light';
     // TODO: Remove after migration to Mantine
     document.body.style.fontFamily = userPreferences.font
       ? `"${userPreferences.font}", sans-serif`
       : '"IBM Plex Mono"';
-  }, [userPreferences.theme, userPreferences.font]);
+  }, [userPreferences.font]);
 
   const getLayout = Component.getLayout ?? (page => page);
 
@@ -117,23 +114,26 @@ export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
         />
         <meta name="theme-color" content="#25292e"></meta>
         <meta name="google" content="notranslate" />
-        <ColorSchemeScript forceColorScheme="dark" />
+        <ColorSchemeScript
+          forceColorScheme={userPreferences.theme === 'dark' ? 'dark' : 'light'}
+        />
       </Head>
 
-      <SSRProvider>
-        <HDXQueryParamProvider>
-          <QueryParamProvider adapter={NextAdapter}>
-            <QueryClientProvider client={queryClient}>
-              <ThemeWrapper fontFamily={userPreferences.font}>
-                {getLayout(<Component {...pageProps} />)}
-                {confirmModal}
-              </ThemeWrapper>
-              <ReactQueryDevtools initialIsOpen={true} />
-              {background}
-            </QueryClientProvider>
-          </QueryParamProvider>
-        </HDXQueryParamProvider>
-      </SSRProvider>
+      <HDXQueryParamProvider>
+        <QueryParamProvider adapter={NextAdapter}>
+          <QueryClientProvider client={queryClient}>
+            <ThemeWrapper
+              fontFamily={userPreferences.font}
+              colorScheme={userPreferences.theme === 'dark' ? 'dark' : 'light'}
+            >
+              {getLayout(<Component {...pageProps} />)}
+              {confirmModal}
+            </ThemeWrapper>
+            <ReactQueryDevtools initialIsOpen={true} />
+            {background}
+          </QueryClientProvider>
+        </QueryParamProvider>
+      </HDXQueryParamProvider>
     </React.Fragment>
   );
 }

packages/app/src/AlertsPage.tsx

@@ -58,7 +58,7 @@ function AlertHistoryCardList({ history }: { history: AlertHistory[] }) {
   return (
     <div className={styles.historyCardWrapper}>
       {paddingItems.map((_, index) => (
-        <Tooltip label="No data" color="dark" withArrow key={index}>
+        <Tooltip label="No data" withArrow key={index}>
           <div className={styles.historyCard} />
         </Tooltip>
       ))}
@@ -84,7 +84,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
           {alert.dashboard?.name}
           {tileName ? (
             <>
-              <i className="bi bi-chevron-right fs-8 mx-1 text-slate-400" />
+              <i className="bi bi-chevron-right fs-8 mx-1 " />
               {tileName}
             </>
           ) : null}
@@ -123,7 +123,7 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
       <>
         If value is {alert.thresholdType === 'above' ? 'over' : 'under'}{' '}
         <span className="fw-bold">{alert.threshold}</span>
-        <span className="text-slate-400">&middot;</span>
+        <span>&middot;</span>
       </>
     );
   }, [alert]);
@@ -172,16 +172,16 @@ function AlertDetails({ alert }: { alert: AlertsPageItem }) {
               className={styles.alertLink}
               title={linkTitle}
             >
-              <i className={`bi ${alertIcon} text-slate-200 me-2 fs-8`} />
+              <i className={`bi ${alertIcon} me-2 fs-8`} />
               {alertName}
             </Link>
           </div>
-          <div className="text-slate-400 fs-8 d-flex gap-2">
+          <div className="fs-8 d-flex gap-2">
             {alertType}
             {notificationMethod}
             {alert.createdBy && (
               <>
-                <span className="text-slate-400">&middot;</span>
+                <span>&middot;</span>
                 <span>
                   Created by {alert.createdBy.name || alert.createdBy.email}
                 </span>
@@ -219,7 +219,7 @@ function AlertCardList({ alerts }: { alerts: AlertsPageItem[] }) {
           <i className="bi bi-check-lg"></i> OK
         </div>
         {okData.length === 0 && (
-          <div className="text-center text-slate-400 my-4 fs-8">No alerts</div>
+          <div className="text-center my-4 fs-8">No alerts</div>
         )}
         {okData.map((alert, index) => (
           <AlertDetails key={index} alert={alert} />
@@ -243,7 +243,7 @@ export default function AlertsPage() {
       <div className="my-4">
         <Container maw={1500}>
           <Alert
-            icon={<i className="bi bi-info-circle-fill text-slate-400" />}
+            icon={<i className="bi bi-info-circle-fill " />}
             color="gray"
             py="xs"
             mt="md"
@@ -259,19 +259,15 @@ export default function AlertsPage() {
             from dashboard charts and saved searches.
           </Alert>
           {isLoading ? (
-            <div className="text-center text-slate-400 my-4 fs-8">
-              Loading...
-            </div>
+            <div className="text-center my-4 fs-8">Loading...</div>
           ) : isError ? (
-            <div className="text-center text-slate-400 my-4 fs-8">Error</div>
+            <div className="text-center my-4 fs-8">Error</div>
           ) : alerts?.length ? (
             <>
               <AlertCardList alerts={alerts} />
             </>
           ) : (
-            <div className="text-center text-slate-400 my-4 fs-8">
-              No alerts created yet
-            </div>
+            <div className="text-center my-4 fs-8">No alerts created yet</div>
           )}
         </Container>
       </div>

packages/app/src/AppNav.components.tsx

@@ -33,10 +33,8 @@ export const AppNavContext = React.createContext<{
 
 export const AppNavCloudBanner = () => {
   return (
-    <div className="my-3 bg-hdx-dark rounded p-2 text-center">
-      <span className="text-slate-300 fs-8">
-        Ready to deploy on ClickHouse Cloud?
-      </span>
+    <div className="my-3 bg-muted rounded p-2 text-center">
+      <span className="fs-8">Ready to deploy on ClickHouse Cloud?</span>
       <div className="mt-2 mb-2">
         <Link
           href="https://clickhouse.com/docs/use-cases/observability/clickstack/getting-started#deploy-with-clickhouse-cloud"
@@ -84,16 +82,9 @@ export const AppNavUserMenu = ({
       <Menu.Target>
         <Paper
           data-testid="user-menu-trigger"
-          m="sm"
-          mt={8}
-          px={8}
-          py={4}
-          radius="md"
-          {...(isCollapsed && {
-            p: 2,
-            bg: 'transparent',
+          className={cx(styles.userMenuTrigger, {
+            [styles.userMenuTriggerCollapsed]: isCollapsed,
           })}
-          className={styles.appNavMenu}
         >
           <Group gap="xs" wrap="nowrap" miw={0}>
             <Avatar size="sm" radius="xl" color="green">
@@ -141,7 +132,7 @@ export const AppNavUserMenu = ({
                     </Text>
                   </div>
                 </Tooltip>
-                <Icon name="chevron-right" className="fs-8 text-slate-400" />
+                <Icon name="chevron-right" className="fs-8 " />
               </>
             )}
           </Group>
@@ -213,21 +204,13 @@ export const AppNavHelpMenu = ({
   ] = useDisclosure(false);
 
   // const isTeamHasNoData = useIsTeamHasNoData();
-  const size = 28;
 
   return (
     <>
       <Paper
-        mb={8}
-        ml="sm"
-        withBorder
-        w={size}
-        h={size}
-        radius="xl"
-        {...(isCollapsed && {
-          ml: 'sm',
+        className={cx(styles.helpMenuTrigger, {
+          [styles.helpMenuTriggerCollapsed]: isCollapsed,
         })}
-        className={styles.appNavMenu}
       >
         <Menu
           withArrow
@@ -237,12 +220,7 @@ export const AppNavHelpMenu = ({
         >
           <Menu.Target>
             <UnstyledButton data-testid="help-menu-trigger" w="100%">
-              <Group
-                align="center"
-                justify="center"
-                h={size}
-                className="text-slate-200 "
-              >
+              <Group align="center" justify="center" h={28}>
                 <Icon name="question-lg" />
               </Group>
             </UnstyledButton>
@@ -251,7 +229,7 @@ export const AppNavHelpMenu = ({
             <Menu.Label>
               Help{' '}
               {version && (
-                <Text size="xs" c="gray.7" component="span">
+                <Text size="xs" component="span">
                   v{version}
                 </Text>
               )}
@@ -295,15 +273,15 @@ export const AppNavHelpMenu = ({
 export const AppNavLink = ({
   className,
   label,
-  iconName,
+  icon,
   href,
   isExpanded,
   onToggle,
   isBeta,
 }: {
   className?: string;
   label: React.ReactNode;
-  iconName: string;
+  icon: React.ReactNode;
   href: string;
   isExpanded?: boolean;
   onToggle?: () => void;
@@ -320,37 +298,26 @@ export const AppNavLink = ({
         data-testid={testId}
         href={href}
         className={cx(
+          styles.listLink,
+          { [styles.listLinkActive]: pathname?.includes(href) },
           className,
-          'text-decoration-none d-flex justify-content-between align-items-center fs-7 text-muted-hover',
-          { 'fw-600 text-success': pathname?.includes(href) },
         )}
+        style={{ display: 'flex', alignItems: 'center' }}
       >
-        <span>
-          <i className={`bi ${iconName} pe-2 text-slate-300`} />{' '}
-          {!isCollapsed && (
-            <span>
-              {label}
-              {isBeta && (
-                <Badge
-                  size="xs"
-                  ms="xs"
-                  color="gray.4"
-                  autoContrast
-                  radius="sm"
-                  className="align-text-bottom"
-                >
-                  Beta
-                </Badge>
-              )}
-            </span>
-          )}
+        <span style={{ display: 'flex', alignItems: 'center' }}>
+          <span className={styles.linkIcon}>{icon}</span>
+          {!isCollapsed && <span>{label}</span>}
         </span>
       </Link>
+      {!isCollapsed && isBeta && (
+        <Badge size="xs" radius="sm" color="gray" style={{ marginRight: 8 }}>
+          Beta
+        </Badge>
+      )}
       {!isCollapsed && onToggle && (
         <ActionIcon
           data-testid={`${testId}-toggle`}
           variant="subtle"
-          color="dark.2"
           size="sm"
           onClick={onToggle}
         >