diff --git a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss deleted file mode 100644 index fa5bdc421a424..0000000000000 --- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.scss +++ /dev/null @@ -1,82 +0,0 @@ -.property-group-filters { - .property-group { - background-color: var(--side); - padding: 0.5rem; - border-radius: 4px; - } - - .property-group-and-or-separator { - color: var(--primary-alt); - padding: 0.5rem 0; - font-size: 12px; - font-weight: 600; - position: relative; - - &::before { - position: absolute; - left: 17px; - top: 0; - width: 2px; - height: 100%; - background-color: var(--border-light); - content: ' '; - } - - > span { - position: relative; - display: inline-block; - z-index: 1; - background-color: var(--bg-light); - padding: 0.25rem; - width: 35px; - text-align: center; - } - } -} - -.property-group-title { - margin-bottom: 0; - font-weight: 600; - font-size: 12px; - color: black; -} - -.and-or-filter { - font-weight: 500; -} - -.and-or-filter-select { - padding-top: 0.5rem; - padding-bottom: 0.5rem; - - .condition-text { - font-weight: 700; - display: flex; - width: 40px; - height: 40px; - margin-right: 12px; - justify-content: center; - align-items: center; - border-radius: 4px; - background-color: var(--mid); - color: var(--primary-alt); - font-size: 12px; - - &.selected { - background-color: var(--primary-3000); - color: #fff; - } - } - - .condition-option { - background-color: var(--bg-light); - padding: 0.5rem; - margin-left: 0.5rem; - margin-right: 0.5rem; - 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 b7013d3b5dfb7..0000000000000 --- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.stories.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { useState } from 'react' -import { Meta } from '@storybook/react' -import { FilterLogicalOperator, FilterType, AnyPropertyFilter, PropertyGroupFilter, PropertyOperator } from '~/types' -import { useMountedLogic } from 'kea' -import { PropertyGroupFilters } from './PropertyGroupFilters' -import { TaxonomicFilterGroupType } from '../TaxonomicFilter/types' -import { cohortsModel } from '~/models/cohortsModel' - -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 { - 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 30d7c835ccf9f..0000000000000 --- a/frontend/src/lib/components/PropertyGroupFilters/PropertyGroupFilters.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { useValues, BindLogic, useActions } from 'kea' -import { PropertyGroupFilter, PropertyGroupFilterValue, FilterType, AnyPropertyFilter } from '~/types' -import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types' -import './PropertyGroupFilters.scss' -import { propertyGroupFilterLogic } from './propertyGroupFilterLogic' -import { PropertyFilters } from '../PropertyFilters/PropertyFilters' -import { GlobalFiltersTitle } from 'scenes/insights/common' -import { IconCopy, IconDelete, IconPlusMini } from 'lib/lemon-ui/icons' -import { LemonButton } from 'lib/lemon-ui/LemonButton' -import { TestAccountFilter } from 'scenes/insights/filters/TestAccountFilter' -import { LemonDivider } from 'lib/lemon-ui/LemonDivider' -import React from 'react' -import { isPropertyGroupFilterLike } from 'lib/components/PropertyFilters/utils' -import { AndOrFilterSelect } from '~/queries/nodes/InsightViz/PropertyGroupFilters/AndOrFilterSelect' - -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 a592cf444e94e..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 { PropertyGroupFilter, FilterLogicalOperator, EmptyPropertyFilter } from '~/types' -import { PropertyGroupFilterLogicProps } from 'lib/components/PropertyFilters/types' - -import type { propertyGroupFilterLogicType } from './propertyGroupFilterLogicType' -import { objectsEqual } from 'lib/utils' -import { eventUsageLogic } from 'lib/utils/eventUsageLogic' -import { convertPropertiesToPropertyGroup } from '../PropertyFilters/utils' - -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], - }), -])