Use select for numerical properties (#2628)

* Use select for numerical properties * fix test * fix isssues
PostHog · Dec 2, 2020 · 1dd7f73 · 1dd7f73
1 parent 7d7dca8
commit 1dd7f73
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 39 deletions.
diff --git a/cypress/integration/trendsElements.js b/cypress/integration/trendsElements.js
@@ -34,7 +34,7 @@ describe('Trends actions & events', () => {
 
         // Use `force = true` because clicking the element without dragging the mouse makes the dropdown disappear
         cy.get('[data-attr=math-avg-0]').click({ force: true })
-        cy.get('[data-attr=math-property-selector-0]').should('exist')
+        cy.get('[data-attr=math-property-select]').should('exist')
     })
 
     it('Apply specific filter on default pageview event', () => {

diff --git a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.js b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.js
@@ -2,11 +2,13 @@ import React, { useRef, useState } from 'react'
 import { useActions, useValues } from 'kea'
 import { EntityTypes } from '../trendsLogic'
 import { ActionFilterDropdown } from './ActionFilterDropdown'
-import { Button, Tooltip, Dropdown, Menu, Col, Row } from 'antd'
+import { Button, Tooltip, Dropdown, Menu, Col, Row, Select } from 'antd'
 import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
 import { userLogic } from 'scenes/userLogic'
 import { DownOutlined } from '@ant-design/icons'
 import { CloseButton } from 'lib/components/CloseButton'
+import { SelectGradientOverflow } from 'lib/components/SelectGradientOverflow'
+import './ActionFilterRow.scss'
 
 const MATHS = {
     total: {
@@ -276,44 +278,48 @@ function MathSelector({ math, index, onMathSelect, areEventPropertiesNumericalAv
 }
 
 function MathPropertySelector(props) {
-    const applicableProperties = props.properties.filter(
-        ({ value }) => value[0] !== '$' && value !== 'distinct_id' && value !== 'token'
-    )
-
-    const overlay = () => {
-        return (
-            <Menu onClick={({ item }) => props.onMathPropertySelect(props.index, item.props['data-value'])}>
-                {applicableProperties.map(({ value, label }) => {
-                    return (
-                        <Menu.Item
-                            key={`math-property-${value}-${props.index}`}
-                            data-attr={`math-property-${value}-${props.index}`}
-                            data-value={value}
-                        >
-                            <Tooltip
-                                title={
-                                    <>
-                                        Calculate {MATHS[props.math].name.toLowerCase()} from property{' '}
-                                        <code>{label}</code>. Note that only {props.name} occurences where{' '}
-                                        <code>{label}</code> is set and a number will be taken into account.
-                                    </>
-                                }
-                                placement="right"
-                            >
-                                {label}
-                            </Tooltip>
-                        </Menu.Item>
-                    )
-                })}
-            </Menu>
-        )
-    }
+    const applicableProperties = props.properties
+        .filter(({ value }) => value[0] !== '$' && value !== 'distinct_id' && value !== 'token')
+        .sort((a, b) => (a.value + '').localeCompare(b.value))
 
     return (
-        <Dropdown overlay={overlay}>
-            <Button data-attr={`math-property-selector-${props.index}`} style={{ marginTop: 8 }}>
-                {props.mathProperty || 'Select property'} <DownOutlined />
-            </Button>
-        </Dropdown>
+        <SelectGradientOverflow
+            showSearch
+            style={{ width: 150 }}
+            onChange={(_, payload) => props.onMathPropertySelect(props.index, payload && payload.value)}
+            className="property-select"
+            value={props.mathProperty}
+            onSearch={(input) => {
+                setInput(input)
+                if (!optionsCache[input] && !isOperatorFlag(operator)) {
+                    loadPropertyValues(input)
+                }
+            }}
+            data-attr="math-property-select"
+            dropdownMatchSelectWidth={350}
+            placeholder={'Select property'}
+        >
+            {applicableProperties.map(({ value, label }) => (
+                <Select.Option
+                    key={`math-property-${value}-${props.index}`}
+                    value={value}
+                    data-attr={`math-property-${value}-${props.index}`}
+                >
+                    <Tooltip
+                        title={
+                            <>
+                                Calculate {MATHS[props.math].name.toLowerCase()} from property <code>{label}</code>.
+                                Note that only {props.name} occurences where <code>{label}</code> is set and a number
+                                will be taken into account.
+                            </>
+                        }
+                        placement="right"
+                        overlayStyle={{ zIndex: 9999999999 }}
+                    >
+                        {label}
+                    </Tooltip>
+                </Select.Option>
+            ))}
+        </SelectGradientOverflow>
     )
 }
diff --git a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.scss b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.scss
@@ -0,0 +1,38 @@
+.property-select {
+    cursor: pointer;
+    margin-top: 6px;
+    .ant-select-selector {
+        border-color: #d9d9d9 !important;
+        cursor: pointer !important;
+    }
+    .ant-select-arrow {
+        color: #2d2d2d;
+        font-size: 10px;
+    }
+
+    &:not(.ant-select-open) input {
+        cursor: pointer !important;
+    }
+    &:hover .ant-select-selection-placeholder,
+    &:hover .ant-select-arrow,
+    &:hover .ant-select-selection-item {
+        color: #7d9bff !important;
+    }
+    &:hover .ant-select-selector {
+        border-color: #7d9bff !important;
+    }
+
+    .ant-select-selector,
+    .ant-select-selection-placeholder,
+    .ant-select-selection-search-input {
+        font-size: 13px;
+        height: 28px !important;
+    }
+    .ant-select-selection-item {
+        line-height: 26px !important;
+    }
+    .ant-select-selection-placeholder {
+        line-height: 24px !important;
+        color: #2d2d2d;
+    }
+}