From 96391210d5e5cc072c17acf10a5a84ada90238a5 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 3 Mar 2025 22:40:54 -0700
Subject: [PATCH] updated some popovers

---
 .../MetricStylingApp/Common/WarningIcon.tsx   | 25 ++++++++-------
 .../StylingAppStyling/EditShowDataLabels.tsx  | 32 +++++++------------
 .../SelectAxis/SelectAxisColumnPopover.tsx    | 18 +++++------
 3 files changed, 32 insertions(+), 43 deletions(-)

diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx
index 8e27df544..7850d82bb 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/Common/WarningIcon.tsx
@@ -1,20 +1,19 @@
-import { AppMaterialIcons } from '@/components/ui';
-import { AppPopover } from '@/components/ui/tooltip';
-import type { PopoverProps } from 'antd';
+import { AlertWarning } from '@/components/ui/icons';
 import { createStyles } from 'antd-style';
 import React from 'react';
+import { cn } from '@/lib/classMerge';
+import { Popover } from '@/components/ui/tooltip/Popover';
 
 export const WarningIcon: React.FC<{
   rowCountThreshold?: number;
   rowCount: number;
-  placement?: PopoverProps['placement'];
+
   warningText?: string;
 }> = React.memo(
   ({
     rowCount,
     rowCountThreshold = 35,
-    warningText = 'Data labels will be hidden if there are too many.',
-    placement = 'left'
+    warningText = 'Data labels will be hidden if there are too many.'
   }) => {
     const { styles, cx } = useStyles();
 
@@ -22,12 +21,14 @@ export const WarningIcon: React.FC<{
       return null;
     }
     return (
-      <AppPopover
-        placement={placement}
-        trigger="click"
-        content={<div className="max-w-[200px] p-2">{warningText}</div>}>
-        <AppMaterialIcons className={cx(styles.warningIcon, 'cursor-pointer')} icon="warning" />
-      </AppPopover>
+      <Popover
+        side="left"
+        align="center"
+        content={<div className="max-w-[200px]">{warningText}</div>}>
+        <div className={cn(styles.warningIcon, 'cursor-pointer')}>
+          <AlertWarning />
+        </div>
+      </Popover>
     );
   }
 );
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditShowDataLabels.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditShowDataLabels.tsx
index 77de9430e..07ec94c59 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditShowDataLabels.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppStyling/EditShowDataLabels.tsx
@@ -1,30 +1,20 @@
 import React from 'react';
 import { LabelAndInput } from '../Common';
-import { Switch } from 'antd';
-import { AppPopover } from '@/components/ui/tooltip';
-import { AppMaterialIcons } from '@/components/ui';
+import { AppSwitch } from '@/components/ui/switch/AppSwitch';
 import { WarningIcon } from '../Common/WarningIcon';
 
 export const EditShowDataLabels: React.FC<{
   showDataLabels: boolean;
   rowCount: number;
   onUpdateColumnSettingConfig: (v: boolean) => void;
-}> = React.memo(
-  ({ showDataLabels, rowCount, onUpdateColumnSettingConfig }) => {
-    return (
-      <LabelAndInput label={'Data labels'}>
-        <div className="flex justify-end space-x-2">
-          <WarningIcon rowCount={rowCount} />
-          <Switch
-            defaultChecked={showDataLabels}
-            onChange={(v) => onUpdateColumnSettingConfig(v)}
-          />
-        </div>
-      </LabelAndInput>
-    );
-  },
-  () => {
-    return true;
-  }
-);
+}> = React.memo(({ showDataLabels, rowCount, onUpdateColumnSettingConfig }) => {
+  return (
+    <LabelAndInput label={'Data labels'}>
+      <div className="flex justify-end space-x-2">
+        <WarningIcon rowCount={rowCount} />
+        <AppSwitch defaultChecked={showDataLabels} onCheckedChange={onUpdateColumnSettingConfig} />
+      </div>
+    </LabelAndInput>
+  );
+});
 EditShowDataLabels.displayName = 'EditShowDataLabels';
diff --git a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnPopover.tsx b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnPopover.tsx
index cb8ea3e65..2d23bcf78 100644
--- a/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnPopover.tsx
+++ b/web/src/controllers/MetricController/MetricViewChart/MetricEditController/MetricStylingApp/StylingAppVisualize/SelectAxis/SelectAxisColumnPopover.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import { AppPopover } from '@/components/ui';
-import { ChartEncodes, IColumnLabelFormat } from '@/components/ui/charts';
+import { Popover } from '@/components/ui/tooltip/Popover';
+import type { ChartEncodes, IColumnLabelFormat } from '@/components/ui/charts';
 import { SelectAxisDropdownContent } from './SelectAxisColumnContent';
-import { ColumnMetaData, IBusterMetricChartConfig } from '@/api/asset_interfaces';
-import { SelectAxisContainerId } from './config';
+import { type IBusterMetricChartConfig } from '@/api/asset_interfaces';
+import type { SelectAxisContainerId } from './config';
 
 interface SelectAxisColumnPopoverProps {
   columnLabelFormat: IColumnLabelFormat;
@@ -21,16 +21,14 @@ interface SelectAxisColumnPopoverProps {
 export const SelectAxisColumnPopover = React.memo(
   ({ children, ...props }: SelectAxisColumnPopoverProps) => {
     return (
-      <AppPopover
-        trigger="click"
-        performant
-        destroyTooltipOnHide
-        placement="leftBottom"
+      <Popover
+        side="left"
+        align="end"
         content={
           <SelectAxisDropdownContent {...props} className="w-full max-w-[315px] min-w-[315px]" />
         }>
         {children}
-      </AppPopover>
+      </Popover>
     );
   }
 );