remove react select (#1367)

Co-authored-by: Elizabet Oliveira <elizabet.oliveira@clickhouse.com>

Author: brandon-pereira

.changeset/angry-walls-fetch.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Remove react-select for mantine

packages/app/package.json

@@ -86,7 +86,6 @@
     "react-markdown": "^8.0.4",
     "react-papaparse": "^4.4.0",
     "react-query": "^3.39.3",
-    "react-select": "^5.7.0",
     "react-sortable-hoc": "^2.0.0",
     "react-useportal": "^1.0.18",
     "recharts": "^2.12.7",

packages/app/src/ChartUtils.tsx

@@ -1,6 +1,5 @@
 import { useMemo, useRef } from 'react';
 import { add } from 'date-fns';
-import Select from 'react-select';
 import { z } from 'zod';
 import {
   filterColumnMetaByType,
@@ -197,33 +196,6 @@ export function seriesToUrlSearchQueryParam({
   });
 }
 
-export function TableSelect({
-  table,
-  setTableAndAggFn,
-}: {
-  setTableAndAggFn: (table: SourceTable, fn: AggFn) => void;
-  table: string;
-}) {
-  return (
-    <Select
-      options={TABLES}
-      className="ds-select w-auto text-nowrap"
-      value={TABLES.find(v => v.value === table)}
-      onChange={opt => {
-        const val = opt?.value ?? 'logs';
-        if (val === 'logs') {
-          setTableAndAggFn('logs', 'count');
-        } else if (val === 'metrics') {
-          // TODO: This should set rate if metric field is a sum
-          // or we should just reset the field if changing tables
-          setTableAndAggFn('metrics', 'max');
-        }
-      }}
-      classNamePrefix="ds-react-select"
-    />
-  );
-}
-
 export function TableToggle({
   table,
   setTableAndAggFn,

packages/app/src/DSSelect.tsx

@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import { useController, UseControllerProps } from 'react-hook-form';
+import { Select } from '@mantine/core';
 
 import { Granularity } from './ChartUtils';
-import DSSelect from './DSSelect';
 
 export default function GranularityPicker({
   value,
@@ -14,9 +14,9 @@ export default function GranularityPicker({
   disabled?: boolean;
 }) {
   return (
-    <DSSelect
+    <Select
       disabled={disabled}
-      options={[
+      data={[
         {
           value: 'auto' as const,
           label: 'Auto Granularity',
@@ -58,7 +58,9 @@ export default function GranularityPicker({
           label: '7 Day Granularity',
         },
       ]}
-      onChange={onChange}
+      onChange={v =>
+        onChange((v ?? undefined) as Granularity | 'auto' | undefined)
+      }
       value={value}
     />
   );

packages/app/src/GranularityPicker.tsx

@@ -35,7 +35,7 @@
   text-transform: uppercase;
   font-size: 11px;
   letter-spacing: 1px;
-  margin-bottom: 2x;
+  margin-bottom: 2px;
   margin-top: 6px;
   padding-left: 16px;
   width: 100%;

packages/app/src/components/DBColumnMultiSelect.tsx

@@ -180,69 +180,6 @@ body {
   }
 }
 
-.ds-select {
-  &.w-auto {
-    .ds-react-select__menu {
-      width: auto;
-    }
-  }
-  &.text-nowrap {
-    .ds-react-select__option {
-      text-wrap: nowrap;
-    }
-  }
-
-  &.input-bg .ds-react-select__control {
-    background: var(--color-bg-field);
-  }
-
-  .ds-react-select__control {
-    background: var(--color-bg-field);
-    border: 1px solid var(--color-border);
-  }
-
-  .ds-react-select__menu {
-    background: var(--color-bg-field);
-    border: 1px solid var(--color-border);
-  }
-
-  .ds-react-select__option {
-    color: var(--color-text);
-  }
-
-  .ds-react-select__option--is-focused {
-    background: var(--color-bg-muted);
-  }
-
-  .ds-react-select__option--is-selected {
-    background: var(--color-bg-muted);
-  }
-
-  .ds-react-select__multi-value {
-    background: var(--color-bg-field);
-
-    .ds-react-select__multi-value__label {
-      color: var(--color-text);
-    }
-  }
-
-  .ds-react-select__indicator-separator {
-    width: 0;
-  }
-  .ds-react-select__indicator {
-    color: var(--color-text-muted);
-  }
-
-  .ds-react-select__input-container,
-  .ds-react-select__placeholder,
-  .ds-react-select__single-value {
-    // @apply text-neutral-600 dark:text-neutral-200;
-    color: var(--color-text);
-    // background: $bg-dark;
-    background: transparent;
-  }
-}
-
 // React Grid for Dashboarding
 .react-grid-item.react-grid-placeholder {
   // Override the default placeholder color from red