fix(insights): adapt aggregation table title for 3000 (#19278)

frontend/src/lib/lemon-ui/LemonTable/LemonTable.scss

@@ -293,8 +293,10 @@
 
         .posthog-3000 & {
             &:hover {
-                .LemonTable__header-content {
-                    color: var(--default);
+                &:not(:has(.LemonTable__header--no-hover:hover)) {
+                    .LemonTable__header-content {
+                        color: var(--default);
+                    }
                 }
             }
 

frontend/src/scenes/insights/views/InsightsTable/columns/AggregationColumn.scss

@@ -0,0 +1,7 @@
+.AggregationColumn__title {
+    color: var(--text-secondary);
+
+    &:hover {
+        color: var(--default);
+    }
+}

frontend/src/scenes/insights/views/InsightsTable/columns/AggregationColumn.tsx

@@ -1,7 +1,8 @@
-// eslint-disable-next-line no-restricted-imports
-import { DownOutlined } from '@ant-design/icons'
-import { Dropdown, Menu } from 'antd'
+import './AggregationColumn.scss'
+
+import { LemonMenu, LemonMenuItem } from '@posthog/lemon-ui'
 import { useActions, useValues } from 'kea'
+import { IconArrowDropDown } from 'lib/lemon-ui/icons'
 import { average, median } from 'lib/utils'
 import { eventUsageLogic } from 'lib/utils/eventUsageLogic'
 import { formatAggregationAxisValue } from 'scenes/insights/aggregationAxisFormat'
@@ -37,29 +38,26 @@ export function AggregationColumnTitle({
         return <span>{CALC_COLUMN_LABELS.total}</span>
     }
 
-    const calcColumnMenu = (
-        <Menu>
-            {Object.keys(CALC_COLUMN_LABELS).map((key) => (
-                <Menu.Item
-                    key={key}
-                    onClick={(e) => {
-                        setAggregationType(key as CalcColumnState)
-                        reportInsightsTableCalcToggled(key)
-                        e.domEvent.stopPropagation() // Prevent click here from affecting table sorting
-                    }}
-                >
-                    {CALC_COLUMN_LABELS[key as CalcColumnState]}
-                </Menu.Item>
-            ))}
-        </Menu>
-    )
+    const items: LemonMenuItem[] = Object.entries(CALC_COLUMN_LABELS).map(([key, label]) => ({
+        label,
+        onClick: () => {
+            setAggregationType(key as CalcColumnState)
+            reportInsightsTableCalcToggled(key)
+        },
+    }))
+
     return (
-        <Dropdown overlay={calcColumnMenu}>
-            <span className="cursor-pointer whitespace-nowrap">
+        <LemonMenu items={items}>
+            <span
+                className="AggregationColumn__title LemonTable__header--no-hover flex cursor-pointer whitespace-nowrap"
+                onClick={(e) => {
+                    e.stopPropagation()
+                }}
+            >
                 {CALC_COLUMN_LABELS[aggregation]}
-                <DownOutlined className="ml-1" />
+                <IconArrowDropDown className="text-lg" />
             </span>
-        </Dropdown>
+        </LemonMenu>
     )
 }