From ed9dc434a71c0b0f371f71088d1a5ae30273da77 Mon Sep 17 00:00:00 2001 From: Sam Winslow Date: Wed, 5 May 2021 20:15:03 -0400 Subject: [PATCH] Horizontal query UI top-level elements (4050) (#4217) --- .../ActionFilterDropdown.tsx | 6 +- .../index.scss} | 19 +++++ .../index.tsx} | 75 ++++++++++++------- .../insights/InsightTabs/RetentionTab.tsx | 2 +- .../sessions/filters/SessionsFilterBox.tsx | 2 +- 5 files changed, 73 insertions(+), 31 deletions(-) rename frontend/src/scenes/insights/ActionFilter/{ => ActionFilterRow}/ActionFilterDropdown.tsx (97%) rename frontend/src/scenes/insights/ActionFilter/{ActionFilterRow.scss => ActionFilterRow/index.scss} (71%) rename frontend/src/scenes/insights/ActionFilter/{ActionFilterRow.tsx => ActionFilterRow/index.tsx} (84%) 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 (
{showOr && ( @@ -127,18 +130,36 @@ export function ActionFilterRow({ {horizontalUI && ( <> Showing - - {!hideMathSelector && ( - - )} - - of + {!hideMathSelector && ( + <> + + + + {MATHS[math || '']?.onProperty && ( + <> + of + + + + + )} + + )} + {separatorWord} )} @@ -188,15 +209,17 @@ export function ActionFilterRow({ )} - {!hideMathSelector && MATHS[math || '']?.onProperty && ( - + {!horizontalUI && !hideMathSelector && MATHS[math || '']?.onProperty && ( + + + )} {(!hidePropertySelector || (filter.properties && filter.properties.length > 0)) && (
@@ -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 ( { props.onMathPropertySelect(props.index, (payload as SelectOption)?.value) }} - className="property-select" value={props.mathProperty} data-attr="math-property-select" dropdownMatchSelectWidth={350} diff --git a/frontend/src/scenes/insights/InsightTabs/RetentionTab.tsx b/frontend/src/scenes/insights/InsightTabs/RetentionTab.tsx index af0d783fb73..d00dfe6d93a 100644 --- a/frontend/src/scenes/insights/InsightTabs/RetentionTab.tsx +++ b/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' diff --git a/frontend/src/scenes/sessions/filters/SessionsFilterBox.tsx b/frontend/src/scenes/sessions/filters/SessionsFilterBox.tsx index 58a68bb2c4c..4d345fe1136 100644 --- a/frontend/src/scenes/sessions/filters/SessionsFilterBox.tsx +++ b/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'