Horizontal query UI top-level elements (4050) (#4217)

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[] => {

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;

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 (
         <div>
             {showOr && (
@@ -127,18 +130,36 @@ export function ActionFilterRow({
                 {horizontalUI && (
                     <>
                         <Col>Showing</Col>
-                        <Col style={{ maxWidth: `calc(50% - 16px${letter ? ' - 32px' : ''})` }}>
-                            {!hideMathSelector && (
-                                <MathSelector
-                                    math={math}
-                                    index={index}
-                                    onMathSelect={onMathSelect}
-                                    areEventPropertiesNumericalAvailable={!!numericalPropertyNames.length}
-                                    style={{ maxWidth: '100%', width: 'initial' }}
-                                />
-                            )}
-                        </Col>
-                        <Col>of</Col>
+                        {!hideMathSelector && (
+                            <>
+                                <Col style={{ maxWidth: `calc(50% - 16px${letter ? ' - 32px' : ''})` }}>
+                                    <MathSelector
+                                        math={math}
+                                        index={index}
+                                        onMathSelect={onMathSelect}
+                                        areEventPropertiesNumericalAvailable={!!numericalPropertyNames.length}
+                                        style={{ maxWidth: '100%', width: 'initial' }}
+                                    />
+                                </Col>
+                                {MATHS[math || '']?.onProperty && (
+                                    <>
+                                        <Col>of</Col>
+                                        <Col style={{ maxWidth: `calc(50% - 16px${letter ? ' - 32px' : ''})` }}>
+                                            <MathPropertySelector
+                                                name={name}
+                                                math={math}
+                                                mathProperty={mathProperty}
+                                                index={index}
+                                                onMathPropertySelect={onMathPropertySelect}
+                                                properties={numericalPropertyNames}
+                                                horizontalUI={horizontalUI}
+                                            />
+                                        </Col>
+                                    </>
+                                )}
+                            </>
+                        )}
+                        <Col>{separatorWord}</Col>
                     </>
                 )}
                 <Col style={{ maxWidth: `calc(${hideMathSelector ? '100' : '50'}% - 16px)` }}>
@@ -188,15 +209,17 @@ export function ActionFilterRow({
                     </Col>
                 )}
             </Row>
-            {!hideMathSelector && MATHS[math || '']?.onProperty && (
-                <MathPropertySelector
-                    name={name}
-                    math={math}
-                    mathProperty={mathProperty}
-                    index={index}
-                    onMathPropertySelect={onMathPropertySelect}
-                    properties={numericalPropertyNames}
-                />
+            {!horizontalUI && !hideMathSelector && MATHS[math || '']?.onProperty && (
+                <Row align="middle">
+                    <MathPropertySelector
+                        name={name}
+                        math={math}
+                        mathProperty={mathProperty}
+                        index={index}
+                        onMathPropertySelect={onMathPropertySelect}
+                        properties={numericalPropertyNames}
+                    />
+                </Row>
             )}
             {(!hidePropertySelector || (filter.properties && filter.properties.length > 0)) && (
                 <div style={{ paddingTop: 6 }}>
@@ -335,6 +358,7 @@ interface MathPropertySelectorProps {
     index: number
     onMathPropertySelect: (index: number, value: string) => any
     properties: SelectOption[]
+    horizontalUI?: boolean
 }
 
 function MathPropertySelector(props: MathPropertySelectorProps): JSX.Element {
@@ -353,11 +377,10 @@ function MathPropertySelector(props: MathPropertySelectorProps): JSX.Element {
     return (
         <SelectGradientOverflow
             showSearch
-            style={{ width: 150 }}
+            className={`property-select ${props.horizontalUI ? 'horizontal-ui' : ''}`}
             onChange={(_: string, payload) => {
                 props.onMathPropertySelect(props.index, (payload as SelectOption)?.value)
             }}
-            className="property-select"
             value={props.mathProperty}
             data-attr="math-property-select"
             dropdownMatchSelectWidth={350}

frontend/src/scenes/insights/InsightTabs/RetentionTab.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef } from 'react'
 import { useValues, useActions } from 'kea'
 import { PropertyFilters } from 'lib/components/PropertyFilters/PropertyFilters'
-import { ActionFilterDropdown } from '../ActionFilter/ActionFilterDropdown'
+import { ActionFilterDropdown } from '../ActionFilter/ActionFilterRow/ActionFilterDropdown'
 import { entityFilterLogic } from '../ActionFilter/entityFilterLogic'
 
 import { DownOutlined, InfoCircleOutlined, ExportOutlined } from '@ant-design/icons'

frontend/src/scenes/sessions/filters/SessionsFilterBox.tsx

@@ -5,7 +5,7 @@ import { useActions, useValues } from 'kea'
 import { actionsModel } from '~/models/actionsModel'
 import { ActionType, CohortType } from '~/types'
 import { EntityTypes } from '~/types'
-import { ActionInfo } from 'scenes/insights/ActionFilter/ActionFilterDropdown'
+import { ActionInfo } from 'scenes/insights/ActionFilter/ActionFilterRow/ActionFilterDropdown'
 import { FilterSelector, sessionsFiltersLogic } from 'scenes/sessions/filters/sessionsFiltersLogic'
 import { Link } from 'lib/components/Link'
 import { cohortsModel } from '~/models/cohortsModel'