From 4aef5b8e1436806f69258f9e2c8f5f96dee7b716 Mon Sep 17 00:00:00 2001 From: Tim Glaser Date: Wed, 2 Dec 2020 13:29:01 +0100 Subject: [PATCH 1/3] Use select for numerical properties --- .../insights/ActionFilter/ActionFilterRow.js | 78 ++++++++++--------- .../ActionFilter/ActionFilterRow.scss | 38 +++++++++ 2 files changed, 81 insertions(+), 35 deletions(-) create mode 100644 frontend/src/scenes/insights/ActionFilter/ActionFilterRow.scss diff --git a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.js b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.js index 4a4eb2f6fd552..47ca844e015c8 100644 --- 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: { @@ -280,40 +282,46 @@ function MathPropertySelector(props) { ({ value }) => value[0] !== '$' && value !== 'distinct_id' && value !== 'token' ) - const overlay = () => { - return ( - props.onMathPropertySelect(props.index, item.props['data-value'])}> - {applicableProperties.map(({ value, label }) => { - return ( - - - Calculate {MATHS[props.math].name.toLowerCase()} from property{' '} - {label}. Note that only {props.name} occurences where{' '} - {label} is set and a number will be taken into account. - - } - placement="right" - > - {label} - - - ) - })} - - ) - } - return ( - - - + 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="prop-val" + dropdownMatchSelectWidth={350} + placeholder={'Select property'} + > + {applicableProperties.map(({ value, label }) => { + return ( + + + Calculate {MATHS[props.math].name.toLowerCase()} from property {label}. + Note that only {props.name} occurences where {label} is set and a + number will be taken into account. + + } + placement="right" + overlayStyle={{ zIndex: 9999999999 }} + > + {label} + + + ) + })} + ) } diff --git a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.scss b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.scss new file mode 100644 index 0000000000000..0aaa011d3a2e0 --- /dev/null +++ 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; + } +} From b95923affda294f3200937e12880f01dd9f56364 Mon Sep 17 00:00:00 2001 From: Tim Glaser Date: Wed, 2 Dec 2020 14:59:05 +0100 Subject: [PATCH 2/3] fix test --- cypress/integration/trendsElements.js | 2 +- frontend/src/scenes/insights/ActionFilter/ActionFilterRow.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/cypress/integration/trendsElements.js b/cypress/integration/trendsElements.js index 69911430e9c8c..1a9b3029450c7 100644 --- 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 index 47ca844e015c8..dd47ce0fab325 100644 --- a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.js +++ b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.js @@ -295,7 +295,7 @@ function MathPropertySelector(props) { loadPropertyValues(input) } }} - data-attr="prop-val" + data-attr="math-property-select" dropdownMatchSelectWidth={350} placeholder={'Select property'} > From ea614b3d5eeccee4ade8987a11748a836f967111 Mon Sep 17 00:00:00 2001 From: Tim Glaser Date: Wed, 2 Dec 2020 15:04:23 +0100 Subject: [PATCH 3/3] fix isssues --- .../insights/ActionFilter/ActionFilterRow.js | 48 +++++++++---------- 1 file changed, 23 insertions(+), 25 deletions(-) diff --git a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.js b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.js index dd47ce0fab325..6f21e3b5d0727 100644 --- a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.js +++ b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.js @@ -278,9 +278,9 @@ function MathSelector({ math, index, onMathSelect, areEventPropertiesNumericalAv } function MathPropertySelector(props) { - const applicableProperties = props.properties.filter( - ({ value }) => value[0] !== '$' && value !== 'distinct_id' && value !== 'token' - ) + const applicableProperties = props.properties + .filter(({ value }) => value[0] !== '$' && value !== 'distinct_id' && value !== 'token') + .sort((a, b) => (a.value + '').localeCompare(b.value)) return ( - {applicableProperties.map(({ value, label }) => { - return ( - ( + + + Calculate {MATHS[props.math].name.toLowerCase()} from property {label}. + Note that only {props.name} occurences where {label} is set and a number + will be taken into account. + + } + placement="right" + overlayStyle={{ zIndex: 9999999999 }} > - - Calculate {MATHS[props.math].name.toLowerCase()} from property {label}. - Note that only {props.name} occurences where {label} is set and a - number will be taken into account. - - } - placement="right" - overlayStyle={{ zIndex: 9999999999 }} - > - {label} - - - ) - })} + {label} + + + ))} ) }