From 2f7289fe857da6c769cea2152e9e9b7c6502d089 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 3 Mar 2025 23:20:46 -0700
Subject: [PATCH] updated popovers

---
 web/src/components/ui/select/Select.tsx       | 31 ++++++++++++++++---
 .../StylingMetric/EditMetricField.tsx         | 22 ++++++-------
 .../StylingMetric/helpers.tsx                 |  4 +--
 .../ReasoningMessage_ThoughtPills.tsx         | 10 +++---
 4 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/web/src/components/ui/select/Select.tsx b/web/src/components/ui/select/Select.tsx
index 3d421bb50..18a85447e 100644
--- a/web/src/components/ui/select/Select.tsx
+++ b/web/src/components/ui/select/Select.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
   Select as SelectBase,
   SelectContent,
@@ -24,7 +24,7 @@ export interface SelectItem<T = string> {
   disabled?: boolean;
 }
 
-export interface SelectProps<T = string> {
+export interface SelectProps<T> {
   items: SelectItem<T>[] | SelectItemGroup[];
   disabled?: boolean;
   onChange: (value: T) => void;
@@ -36,7 +36,7 @@ export interface SelectProps<T = string> {
   className?: string;
 }
 
-const _Select = <T,>({
+const _Select = <T extends string>({
   items,
   showIndex,
   disabled,
@@ -68,7 +68,7 @@ const _Select = <T,>({
   );
 };
 _Select.displayName = 'Select';
-export const Select = React.memo(_Select) as typeof _Select;
+export const Select = _Select;
 
 const SelectItemSelector = <T,>({
   item,
@@ -113,3 +113,26 @@ SelectItemSelector.displayName = 'SelectItemSelector';
 const SelectItemSecondaryText: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   return <span className="text-gray-light text2xs">{children}</span>;
 };
+
+const ExampleUsage = () => {
+  const [value, setValue] = useState<string>('');
+  const values: SelectItem<'1' | '2'>[] = [
+    {
+      value: '1',
+      label: '1'
+    },
+    {
+      value: '2',
+      label: '2'
+    }
+  ];
+
+  return (
+    <Select
+      items={values}
+      onChange={(v) => {
+        console.log(v);
+      }}
+    />
+  );
+};
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingMetric/EditMetricField.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingMetric/EditMetricField.tsx
index a817fbdbf..774e1ca36 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingMetric/EditMetricField.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingMetric/EditMetricField.tsx
@@ -1,15 +1,17 @@
-import { IBusterMetricChartConfig } from '@/api/asset_interfaces';
+import type { IBusterMetricChartConfig } from '@/api/asset_interfaces';
 import { isNumericColumnStyle, isNumericColumnType } from '@/lib/messages';
 import React, { useMemo } from 'react';
 import { LabelAndInput } from '../../Common';
-import { Button, Select } from 'antd';
+import { Select } from '@/components/ui/select';
+import { Button } from '@/components/ui/buttons';
 import { DEFAULT_COLUMN_SETTINGS } from '@/api/asset_interfaces';
 import { useMemoizedFn } from 'ahooks';
 import { createColumnFieldOptions } from './helpers';
-import { AppMaterialIcons, AppPopover } from '@/components/ui';
+import { Popover } from '@/components/ui/tooltip/Popover';
 import { SelectAxisDropdownContent } from '../SelectAxis/SelectAxisColumnContent';
 import { ChartType, DerivedMetricTitle } from '@/components/ui/charts';
 import { SelectAxisContainerId } from '../SelectAxis/config';
+import { Dots } from '@/components/ui/icons';
 
 export const EditMetricField: React.FC<{
   label?: string;
@@ -61,9 +63,8 @@ export const EditMetricField: React.FC<{
       <LabelAndInput label={label}>
         <div className="flex items-center justify-between space-x-1.5 overflow-hidden">
           <Select
-            options={columnFieldOptions}
+            items={columnFieldOptions}
             className="w-full overflow-hidden"
-            popupMatchSelectWidth={false}
             value={selectedOption}
             onChange={onChangeOption}
           />
@@ -87,9 +88,7 @@ const StylingPopover: React.FC<{
   rowCount: number;
 }> = ({ metricColumnId, columnLabelFormat, rowCount }) => {
   return (
-    <AppPopover
-      trigger="click"
-      destroyTooltipOnHide
+    <Popover
       content={
         <div className="w-full max-w-[315px] min-w-[315px]">
           <SelectAxisDropdownContent
@@ -107,8 +106,9 @@ const StylingPopover: React.FC<{
           />
         </div>
       }
-      placement="leftBottom">
-      <Button type="text" icon={<AppMaterialIcons icon="more_horiz" />} />
-    </AppPopover>
+      align="end"
+      side="left">
+      <Button variant="ghost" prefix={<Dots />} />
+    </Popover>
   );
 };
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingMetric/helpers.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingMetric/helpers.tsx
index afda5bef6..1adf6010b 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingMetric/helpers.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/StylingMetric/helpers.tsx
@@ -7,8 +7,8 @@ export const createColumnFieldOptions = (
   columnMetadata: ColumnMetaData[],
   columnLabelFormats: IBusterMetricChartConfig['columnLabelFormats'],
   iconClass: string
-): SelectItem[] => {
-  return columnMetadata.map<SelectItem>((column) => {
+): SelectItem<string>[] => {
+  return columnMetadata.map<SelectItem<string>>((column) => {
     const labelFormat = columnLabelFormats[column.name];
     const formattedLabel = formatLabel(column.name, labelFormat, true);
     const Icon = ColumnTypeIcon[labelFormat.style];
diff --git a/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Thought/ReasoningMessage_ThoughtPills.tsx b/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Thought/ReasoningMessage_ThoughtPills.tsx
index b9b62e174..d553af5ad 100644
--- a/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Thought/ReasoningMessage_ThoughtPills.tsx
+++ b/web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Thought/ReasoningMessage_ThoughtPills.tsx
@@ -3,9 +3,8 @@ import { createStyles } from 'antd-style';
 import React, { useMemo } from 'react';
 import { AnimatePresence, motion } from 'framer-motion';
 import { useMemoizedFn } from 'ahooks';
-import { AppPopover } from '@/components/ui';
-import { PopoverProps } from 'antd';
 import { isOpenableFile, SelectedFile, useChatLayoutContextSelector } from '@layouts/ChatLayout';
+import { Popover } from '@/components/ui/tooltip/Popover';
 
 const duration = 0.25;
 
@@ -103,7 +102,6 @@ const Pill: React.FC<{
 
 Pill.displayName = 'Pill';
 
-const memoizedTrigger: PopoverProps['trigger'] = ['click'];
 const OverflowPill = React.memo(
   ({
     hiddenPills,
@@ -117,7 +115,7 @@ const OverflowPill = React.memo(
     const count = hiddenPills.length;
 
     const content = (
-      <div className="flex max-w-[400px] flex-wrap gap-1 p-1.5">
+      <div className="flex max-w-[400px] flex-wrap gap-1">
         {hiddenPills.map((pill) => (
           <Pill key={pill.id} useAnimation={useAnimation} {...pill} onClick={undefined} />
         ))}
@@ -125,11 +123,11 @@ const OverflowPill = React.memo(
     );
 
     return (
-      <AppPopover destroyTooltipOnHide content={content} trigger={memoizedTrigger}>
+      <Popover size={'sm'} content={content}>
         <div>
           <Pill className="cursor-pointer" useAnimation={useAnimation} text={`+${count} more`} />
         </div>
-      </AppPopover>
+      </Popover>
     );
   }
 );