diff --git a/frontend/src/scenes/insights/ActionFilter/ActionFilterDropdown.tsx b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow/ActionFilterDropdown.tsx similarity index 97% rename from frontend/src/scenes/insights/ActionFilter/ActionFilterDropdown.tsx rename to frontend/src/scenes/insights/ActionFilter/ActionFilterRow/ActionFilterDropdown.tsx index 6a0bdff5855..2a4a7792e45 100644 --- a/frontend/src/scenes/insights/ActionFilter/ActionFilterDropdown.tsx +++ b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow/ActionFilterDropdown.tsx @@ -4,11 +4,11 @@ import { ActionFilter, ActionType, EntityTypes, EventDefinition } from '~/types' import { actionsModel } from '~/models/actionsModel' import { FireOutlined, InfoCircleOutlined, AimOutlined, ContainerOutlined } from '@ant-design/icons' import { Tooltip } from 'antd' -import { ActionSelectInfo } from '../ActionSelectInfo' -import { SelectBox, SelectedItem } from '../../../lib/components/SelectBox' +import { ActionSelectInfo } from '../../ActionSelectInfo' +import { SelectBox, SelectedItem } from 'lib/components/SelectBox' import { Link } from 'lib/components/Link' import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo' -import { entityFilterLogic } from './entityFilterLogic' +import { entityFilterLogic } from '../entityFilterLogic' import { eventDefinitionsLogic } from 'scenes/events/eventDefinitionsLogic' const getSuggestions = (events: EventDefinition[]): EventDefinition[] => { diff --git a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.scss b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow/index.scss similarity index 71% rename from frontend/src/scenes/insights/ActionFilter/ActionFilterRow.scss rename to frontend/src/scenes/insights/ActionFilter/ActionFilterRow/index.scss index 7c4405f5f9a..68cf8c26934 100644 --- a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.scss +++ b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow/index.scss @@ -2,6 +2,7 @@ .property-select { cursor: pointer; + width: 150px; margin-top: 6px; .ant-select-selector { border-color: #d9d9d9 !important; @@ -37,6 +38,24 @@ line-height: 24px !important; color: #2d2d2d; } + + &.horizontal-ui { + width: unset !important; + margin-top: 0; + + .ant-select-selector, + .ant-select-selection-placeholder, + .ant-select-selection-search-input { + font-size: inherit; + height: 32px !important; + } + .ant-select-selection-item { + line-height: 30px !important; + } + .ant-select-selection-placeholder { + line-height: 30px !important; + } + } } .action-row-letter { line-height: 32px; diff --git a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.tsx b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow/index.tsx similarity index 84% rename from frontend/src/scenes/insights/ActionFilter/ActionFilterRow.tsx rename to frontend/src/scenes/insights/ActionFilter/ActionFilterRow/index.tsx index c760331fa8e..e4501dc2fb4 100644 --- a/frontend/src/scenes/insights/ActionFilter/ActionFilterRow.tsx +++ b/frontend/src/scenes/insights/ActionFilter/ActionFilterRow/index.tsx @@ -7,12 +7,12 @@ import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters' import { PROPERTY_MATH_TYPE, EVENT_MATH_TYPE, MATHS } from 'lib/constants' import { DownOutlined, DeleteOutlined } from '@ant-design/icons' import { SelectGradientOverflow } from 'lib/components/SelectGradientOverflow' -import './ActionFilterRow.scss' -import { BareEntity, entityFilterLogic } from './entityFilterLogic' +import { BareEntity, entityFilterLogic } from '../entityFilterLogic' import { PropertyKeyInfo } from 'lib/components/PropertyKeyInfo' import { preflightLogic } from 'scenes/PreflightCheck/logic' import { featureFlagLogic } from 'lib/logic/featureFlagLogic' import { propertyDefinitionsLogic } from 'scenes/events/propertyDefinitionsLogic' +import './index.scss' const EVENT_MATH_ENTRIES = Object.entries(MATHS).filter(([, item]) => item.type == EVENT_MATH_TYPE) const PROPERTY_MATH_ENTRIES = Object.entries(MATHS).filter(([, item]) => item.type == PROPERTY_MATH_TYPE) @@ -87,10 +87,12 @@ export function ActionFilterRow({ }) } - const dropDownCondition: boolean = Boolean( + const dropDownCondition = Boolean( selectedFilter && selectedFilter?.type === filter.type && selectedFilter?.index === index ) + const separatorWord = math === 'dau' ? 'who did' : 'of' // Separator between property and value. + const onClick = (): void => { if (dropDownCondition) { selectFilter(null) @@ -107,6 +109,7 @@ export function ActionFilterRow({ name = entity.name || filter.name value = entity.id || filter.id } + return (