diff --git a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png index 3831be858dd60..8af5a7ae6b4a0 100644 Binary files a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png and b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png differ diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss deleted file mode 100644 index e842e4aab936c..0000000000000 --- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss +++ /dev/null @@ -1,82 +0,0 @@ -.property-group-filters { - .property-group { - padding: 0.5rem; - background-color: var(--side); - border-radius: 4px; - } - - .property-group-and-or-separator { - position: relative; - padding: 0.5rem 0; - font-size: 12px; - font-weight: 600; - color: var(--primary-alt); - - &::before { - position: absolute; - top: 0; - left: 17px; - width: 2px; - height: 100%; - content: ' '; - background-color: var(--border-light); - } - - > span { - position: relative; - z-index: 1; - display: inline-block; - width: 35px; - padding: 0.25rem; - text-align: center; - background-color: var(--bg-light); - } - } -} - -.property-group-title { - margin-bottom: 0; - font-size: 12px; - font-weight: 600; - color: black; -} - -.and-or-filter { - font-weight: 500; -} - -.and-or-filter-select { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - - .condition-text { - display: flex; - align-items: center; - justify-content: center; - width: 40px; - height: 40px; - margin-right: 12px; - font-size: 12px; - font-weight: 700; - color: var(--primary-alt); - background-color: var(--mid); - border-radius: 4px; - - &.selected { - color: #fff; - background-color: var(--primary-3000); - } - } - - .condition-option { - padding: 0.5rem; - margin-right: 0.5rem; - margin-left: 0.5rem; - background-color: var(--bg-light); - border-radius: 4px; - } - - .ant-select-item-option-active:not(.ant-select-item-option-disabled) { - background: var(--primary-highlight); - } -} diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.stories.tsx b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.stories.tsx deleted file mode 100644 index 2a3896de8c889..0000000000000 --- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.stories.tsx +++ /dev/null @@ -1,106 +0,0 @@ -import { Meta } from '@storybook/react' -import { useMountedLogic } from 'kea' -import { useState } from 'react' - -import { useStorybookMocks } from '~/mocks/browser' -import { cohortsModel } from '~/models/cohortsModel' -import { AnyPropertyFilter, FilterLogicalOperator, FilterType, PropertyGroupFilter, PropertyOperator } from '~/types' - -import { TaxonomicFilterGroupType } from '../TaxonomicFilter/types' -import { PropertyGroupFilters } from './PropertyGroupFilters' - -const meta: Meta = { - title: 'Filters/PropertyGroupFilters', - component: PropertyGroupFilters, -} -export default meta - -const propertyFilters = [ - { - key: '$timestamp', - operator: PropertyOperator.IsDateAfter, - type: 'event', - value: '2020-04-01 12:34:56', - }, - { - key: 'Browser', - operator: PropertyOperator.Exact, - type: 'event', - value: 'Chrome', - }, -] as AnyPropertyFilter[] - -const taxonomicGroupTypes = [ - TaxonomicFilterGroupType.EventProperties, - TaxonomicFilterGroupType.PersonProperties, - TaxonomicFilterGroupType.EventFeatureFlags, - TaxonomicFilterGroupType.Cohorts, - TaxonomicFilterGroupType.Elements, -] - -export function GroupPropertyFilters(): JSX.Element { - useStorybookMocks({ - get: { - '/api/event/values/': [], - }, - }) - useMountedLogic(cohortsModel) - - const [propertyGroupFilter, setPropertyGroupFilter] = useState({ - type: FilterLogicalOperator.And, - values: [ - { - type: FilterLogicalOperator.Or, - values: propertyFilters, - }, - { - type: FilterLogicalOperator.And, - values: propertyFilters, - }, - ], - }) - const [filters, setFilters] = useState({ - properties: propertyFilters, - }) - - return ( - <> - setFilters(f)} - filters={filters} - noTitle - /> - - ) -} - -export function EmptyGroupPropertyFilters(): JSX.Element { - useMountedLogic(cohortsModel) - - const [propertyGroupFilter, setPropertyGroupFilter] = useState({ - type: FilterLogicalOperator.And, - values: [], - }) - const [filters, setFilters] = useState({}) - - return ( - <> - setFilters(f)} - filters={filters} - noTitle - /> -
- - ) -} diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx deleted file mode 100644 index 6d532b1a948f0..0000000000000 --- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx +++ /dev/null @@ -1,152 +0,0 @@ -import './PropertyGroupFilters.scss' - -import { BindLogic, useActions, useValues } from 'kea' -import { isPropertyGroupFilterLike } from 'lib/components/PropertyFilters/utils' -import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' -import { IconCopy, IconDelete, IconPlusMini } from 'lib/lemon-ui/icons' -import { LemonButton } from 'lib/lemon-ui/LemonButton' -import { LemonDivider } from 'lib/lemon-ui/LemonDivider' -import React from 'react' -import { GlobalFiltersTitle } from 'scenes/insights/common' -import { TestAccountFilter } from 'scenes/insights/filters/TestAccountFilter' - -import { AndOrFilterSelect } from '~/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect' -import { AnyPropertyFilter, FilterType, PropertyGroupFilter, PropertyGroupFilterValue } from '~/types' - -import { PropertyFilters } from '../PropertyFilters/PropertyFilters' -import { propertyGroupFilterLogic } from './propertyGroupFilterLogic' - -interface PropertyGroupFilters { - value: PropertyGroupFilter - onChange: (filters: PropertyGroupFilter) => void - pageKey: string - taxonomicGroupTypes?: TaxonomicFilterGroupType[] - eventNames?: string[] - setTestFilters: (filters: Partial) => void - filters: Partial - noTitle?: boolean -} - -export function PropertyGroupFilters({ - value, - onChange, - pageKey, - taxonomicGroupTypes, - eventNames = [], - setTestFilters, - filters, - noTitle, -}: PropertyGroupFilters): JSX.Element { - const logicProps = { value, onChange, pageKey } - const { propertyGroupFilter } = useValues(propertyGroupFilterLogic(logicProps)) - const { - addFilterGroup, - removeFilterGroup, - setOuterPropertyGroupsType, - setInnerPropertyGroupType, - setPropertyFilters, - duplicateFilterGroup, - } = useActions(propertyGroupFilterLogic(logicProps)) - - const showHeader = !noTitle || (propertyGroupFilter.type && propertyGroupFilter.values.length > 1) - - return ( -
- {propertyGroupFilter.values && ( - - setTestFilters(testFilters)} /> - {showHeader ? ( - <> -
- {!noTitle ? : null} - {propertyGroupFilter.type && propertyGroupFilter.values.length > 1 && ( - setOuterPropertyGroupsType(value)} - topLevelFilter={true} - suffix={['group', 'groups']} - /> - )} -
- - - ) : null} - {propertyGroupFilter.values?.length ? ( -
- {propertyGroupFilter.values?.map( - (group: PropertyGroupFilterValue, propertyGroupIndex: number) => { - return ( - -
-
- - setInnerPropertyGroupType(type, propertyGroupIndex) - } - value={group.type} - /> -
- } - status="primary-alt" - onClick={() => duplicateFilterGroup(propertyGroupIndex)} - size="small" - /> - } - status="primary-alt" - onClick={() => removeFilterGroup(propertyGroupIndex)} - size="small" - /> -
- { - setPropertyFilters(properties, propertyGroupIndex) - }} - pageKey={`insight-filters-${propertyGroupIndex}`} - taxonomicGroupTypes={taxonomicGroupTypes} - eventNames={eventNames} - propertyGroupType={group.type} - /> -
- {propertyGroupIndex !== propertyGroupFilter.values.length - 1 && ( -
- {propertyGroupFilter.type} -
- )} - - ) - } - )} -
- ) : null} - - )} - addFilterGroup()} - icon={} - sideIcon={null} - > - Add filter group - -
- ) -} diff --git a/frontend/src/lib/components/PropertyGroupFilters/propertyGroupFilterLogic.ts b/frontend/src/lib/components/PropertyGroupFilters/propertyGroupFilterLogic.ts deleted file mode 100644 index cabfc14278390..0000000000000 --- a/frontend/src/lib/components/PropertyGroupFilters/propertyGroupFilterLogic.ts +++ /dev/null @@ -1,109 +0,0 @@ -import { actions, kea, key, listeners, path, props, propsChanged, reducers, selectors } from 'kea' -import { PropertyGroupFilterLogicProps } from 'lib/components/PropertyFilters/types' -import { objectsEqual } from 'lib/utils' -import { eventUsageLogic } from 'lib/utils/eventUsageLogic' - -import { EmptyPropertyFilter, FilterLogicalOperator, PropertyGroupFilter } from '~/types' - -import { convertPropertiesToPropertyGroup } from '../PropertyFilters/utils' -import type { propertyGroupFilterLogicType } from './propertyGroupFilterLogicType' - -export const propertyGroupFilterLogic = kea([ - path(['lib', 'components', 'PropertyGroupFilters', 'propertyGroupFilterLogic']), - props({} as PropertyGroupFilterLogicProps), - key((props) => props.pageKey), - - propsChanged(({ actions, props }, oldProps) => { - if (props.value && !objectsEqual(props.value, oldProps.value)) { - actions.setFilters(props.value) - } - }), - - actions({ - update: (propertyGroupIndex?: number) => ({ propertyGroupIndex }), - setFilters: (filters: PropertyGroupFilter) => ({ filters }), - removeFilterGroup: (filterGroup: number) => ({ filterGroup }), - setOuterPropertyGroupsType: (type: FilterLogicalOperator) => ({ type }), - setPropertyFilters: (properties, index: number) => ({ properties, index }), - setInnerPropertyGroupType: (type: FilterLogicalOperator, index: number) => ({ type, index }), - duplicateFilterGroup: (propertyGroupIndex: number) => ({ propertyGroupIndex }), - addFilterGroup: true, - }), - - reducers(({ props }) => ({ - filters: [ - convertPropertiesToPropertyGroup(props.value), - { - setFilters: (_, { filters }) => filters, - addFilterGroup: (state) => { - if (!state.values) { - return { - type: FilterLogicalOperator.And, - values: [ - { - type: FilterLogicalOperator.And, - values: [{} as EmptyPropertyFilter], - }, - ], - } - } - const filterGroups = [ - ...state.values, - { type: FilterLogicalOperator.And, values: [{} as EmptyPropertyFilter] }, - ] - - return { ...state, values: filterGroups } - }, - removeFilterGroup: (state, { filterGroup }) => { - const filteredGroups = [...state.values] - filteredGroups.splice(filterGroup, 1) - return { ...state, values: filteredGroups } - }, - setOuterPropertyGroupsType: (state, { type }) => { - return { ...state, type } - }, - setPropertyFilters: (state, { properties, index }) => { - const values = [...state.values] - values[index] = { ...values[index], values: properties } - - return { ...state, values } - }, - setInnerPropertyGroupType: (state, { type, index }) => { - const values = [...state.values] - values[index] = { ...values[index], type } - return { ...state, values } - }, - duplicateFilterGroup: (state, { propertyGroupIndex }) => { - const values = state.values.concat([state.values[propertyGroupIndex]]) - return { ...state, values } - }, - }, - ], - })), - listeners(({ actions, props, values }) => ({ - setFilters: () => actions.update(), - setPropertyFilters: () => actions.update(), - setInnerPropertyGroupType: ({ type, index }) => { - eventUsageLogic.actions.reportChangeInnerPropertyGroupFiltersType( - type, - values.filters.values[index].values.length - ) - actions.update() - }, - setOuterPropertyGroupsType: ({ type }) => { - eventUsageLogic.actions.reportChangeOuterPropertyGroupFiltersType(type, values.filters.values.length) - actions.update() - }, - removeFilterGroup: () => actions.update(), - addFilterGroup: () => { - eventUsageLogic.actions.reportPropertyGroupFilterAdded() - }, - update: () => { - props.onChange(values.filters) - }, - })), - - selectors({ - propertyGroupFilter: [(s) => [s.filters], (propertyGroupFilter) => propertyGroupFilter], - }), -]) diff --git a/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx b/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx index 97de109870bc6..52499cfa71aca 100644 --- a/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx +++ b/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx @@ -36,7 +36,6 @@ export function GlobalAndOrFilters({ insightProps }: EditorFilterProps): JSX.Ele setQuery={updateQuerySource} eventNames={getAllEventNames(querySource as TrendsQuery | StickinessQuery, allActions)} taxonomicGroupTypes={taxonomicGroupTypes} - noTitle /> ) } diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx index f1be02c46d0b0..aec00dc880acb 100644 --- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx +++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx @@ -7,7 +7,6 @@ import { isPropertyGroupFilterLike } from 'lib/components/PropertyFilters/utils' import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' import { IconCopy, IconDelete, IconPlusMini } from 'lib/lemon-ui/icons' import React from 'react' -import { GlobalFiltersTitle } from 'scenes/insights/common' import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils' import { InsightQueryNode, StickinessQuery, TrendsQuery } from '~/queries/schema' @@ -24,7 +23,6 @@ type PropertyGroupFiltersProps = { pageKey: string eventNames?: string[] taxonomicGroupTypes?: TaxonomicFilterGroupType[] - noTitle?: boolean } export function PropertyGroupFilters({ @@ -34,7 +32,6 @@ export function PropertyGroupFilters({ pageKey, eventNames = [], taxonomicGroupTypes, - noTitle, }: PropertyGroupFiltersProps): JSX.Element { const logicProps = { query, setQuery, pageKey } const { propertyGroupFilter } = useValues(propertyGroupFilterLogic(logicProps)) @@ -47,7 +44,7 @@ export function PropertyGroupFilters({ setPropertyFilters, } = useActions(propertyGroupFilterLogic(logicProps)) - const showHeader = !noTitle || (propertyGroupFilter.type && propertyGroupFilter.values.length > 1) + const showHeader = propertyGroupFilter.type && propertyGroupFilter.values.length > 1 return (
@@ -57,7 +54,6 @@ export function PropertyGroupFilters({ {showHeader ? ( <>
- {!noTitle ? : null} {propertyGroupFilter.type && propertyGroupFilter.values.length > 1 && ( - {title}{' '} - {!orFiltering && ( - - These filters will apply to all the {unit} in this graph. - - } - > - - - )} - - ) -}