diff --git a/frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx b/frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx index df01db9b55538..6b96c7d094b66 100644 --- a/frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx +++ b/frontend/src/lib/components/HogQLEditor/HogQLEditor.tsx @@ -9,6 +9,7 @@ import { hogQLEditorLogic } from './hogQLEditorLogic' export interface HogQLEditorProps { onChange: (value: string) => void value: string | undefined + hogQLTable?: string disablePersonProperties?: boolean disableAutoFocus?: boolean disableCmdEnter?: boolean @@ -20,6 +21,7 @@ let uniqueNode = 0 export function HogQLEditor({ onChange, value, + hogQLTable, disablePersonProperties, disableAutoFocus, disableCmdEnter, @@ -28,7 +30,7 @@ export function HogQLEditor({ }: HogQLEditorProps): JSX.Element { const [key] = useState(() => `HogQLEditor.${uniqueNode++}`) const textareaRef = useRef(null) - const logic = hogQLEditorLogic({ key, value, onChange, textareaRef }) + const logic = hogQLEditorLogic({ key, value, onChange, hogQLTable, textareaRef }) const { localValue, error, responseLoading } = useValues(logic) const { setLocalValue, submit } = useActions(logic) @@ -53,7 +55,9 @@ export function HogQLEditor({ maxRows={6} placeholder={ placeholder ?? - (disablePersonProperties + (hogQLTable === 'persons' + ? "Enter HogQL expression, such as:\n- properties.$geoip_country_name\n- toInt(properties.$browser_version) * 10\n- concat(properties.name, ' <', properties.email, '>')\n- is_identified ? 'user' : 'anon'" + : disablePersonProperties ? "Enter HogQL expression, such as:\n- properties.$current_url\n- toInt(properties.`Long Field Name`) * 10\n- concat(event, ' ', distinct_id)\n- if(1 < 2, 'small', 'large')" : "Enter HogQL Expression, such as:\n- properties.$current_url\n- person.properties.$geoip_country_name\n- toInt(properties.`Long Field Name`) * 10\n- concat(event, ' ', distinct_id)\n- if(1 < 2, 'small', 'large')") } diff --git a/frontend/src/lib/components/HogQLEditor/hogQLEditorLogic.ts b/frontend/src/lib/components/HogQLEditor/hogQLEditorLogic.ts index 98cdeff95c17a..0507e78595775 100644 --- a/frontend/src/lib/components/HogQLEditor/hogQLEditorLogic.ts +++ b/frontend/src/lib/components/HogQLEditor/hogQLEditorLogic.ts @@ -9,6 +9,7 @@ import React from 'react' export interface HogQLEditorLogicProps { key: string value: string | undefined + hogQLTable?: string onChange: (value: string) => void textareaRef?: React.MutableRefObject } @@ -32,6 +33,7 @@ export const hogQLEditorLogic = kea([ const response = await query({ kind: NodeKind.HogQLMetadata, expr: values.localValue, + table: props.hogQLTable || 'events', }) breakpoint() if (response && Array.isArray(response.errors) && response.errors.length > 0) { diff --git a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx index c9f8dc06f1f28..53cfa3972e9a6 100644 --- a/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx +++ b/frontend/src/lib/components/PropertyFilters/PropertyFilters.tsx @@ -17,6 +17,7 @@ interface PropertyFiltersProps { disablePopover?: boolean style?: CSSProperties taxonomicGroupTypes?: TaxonomicFilterGroupType[] + hogQLTable?: string showNestedArrow?: boolean eventNames?: string[] logicalRowDivider?: boolean @@ -36,6 +37,7 @@ export function PropertyFilters({ showConditionBadge = false, disablePopover = false, // use bare PropertyFilter without popover taxonomicGroupTypes, + hogQLTable, style = {}, showNestedArrow = false, eventNames = [], @@ -88,6 +90,7 @@ export function PropertyFilters({ onComplete={onComplete} orFiltering={orFiltering} taxonomicGroupTypes={taxonomicGroupTypes} + hogQLTable={hogQLTable} eventNames={eventNames} propertyGroupType={propertyGroupType} disablePopover={disablePopover || orFiltering} diff --git a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx index acd36e767d6f8..9a08aa82b702c 100644 --- a/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx +++ b/frontend/src/lib/components/PropertyFilters/components/TaxonomicPropertyFilter.tsx @@ -38,6 +38,7 @@ export function TaxonomicPropertyFilter({ orFiltering, addText = 'Add filter', hasRowOperator, + hogQLTable, }: PropertyFilterInternalProps): JSX.Element { const pageKey = useMemo(() => pageKeyInput || `filter-${uniqueMemoizedIndex++}`, [pageKeyInput]) const groupTypes = taxonomicGroupTypes || [ @@ -98,6 +99,7 @@ export function TaxonomicPropertyFilter({ value={cohortOrOtherValue} onChange={taxonomicOnChange} taxonomicGroupTypes={groupTypes} + hogQLTable={hogQLTable} eventNames={eventNames} /> ) diff --git a/frontend/src/lib/components/PropertyFilters/types.ts b/frontend/src/lib/components/PropertyFilters/types.ts index 824554eaf5708..433fbad88ea55 100644 --- a/frontend/src/lib/components/PropertyFilters/types.ts +++ b/frontend/src/lib/components/PropertyFilters/types.ts @@ -41,4 +41,5 @@ export interface PropertyFilterInternalProps { orFiltering?: boolean addText?: string | null hasRowOperator?: boolean + hogQLTable?: string } diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx index 470aca6ea7e3a..3078f7068fc19 100644 --- a/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx +++ b/frontend/src/lib/components/TaxonomicFilter/InfiniteSelectResults.tsx @@ -60,7 +60,11 @@ export function InfiniteSelectResults({ const RenderComponent = activeTaxonomicGroup?.render const listComponent = RenderComponent ? ( - selectItem(activeTaxonomicGroup, newValue, newValue)} /> + selectItem(activeTaxonomicGroup, newValue, newValue)} + /> ) : ( ) diff --git a/frontend/src/lib/components/TaxonomicFilter/InlineHogQLEditor.tsx b/frontend/src/lib/components/TaxonomicFilter/InlineHogQLEditor.tsx index 320e04d706f03..e7d35c4c18d77 100644 --- a/frontend/src/lib/components/TaxonomicFilter/InlineHogQLEditor.tsx +++ b/frontend/src/lib/components/TaxonomicFilter/InlineHogQLEditor.tsx @@ -4,14 +4,16 @@ import { HogQLEditor } from 'lib/components/HogQLEditor/HogQLEditor' export interface InlineHogQLEditorProps { value?: TaxonomicFilterValue onChange: (value: TaxonomicFilterValue) => void + hogQLTable?: string } -export function InlineHogQLEditor({ value, onChange }: InlineHogQLEditorProps): JSX.Element { +export function InlineHogQLEditor({ value, onChange, hogQLTable }: InlineHogQLEditorProps): JSX.Element { return (
diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx index 4e48d43e1c6a1..3d452e8eda064 100644 --- a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx +++ b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx @@ -29,6 +29,7 @@ export function TaxonomicFilter({ excludedProperties, popoverEnabled = true, selectFirstItem = true, + hogQLTable = 'events', }: TaxonomicFilterProps): JSX.Element { // Generate a unique key for each unique TaxonomicFilter that's rendered const taxonomicFilterLogicKey = useMemo( @@ -50,8 +51,8 @@ export function TaxonomicFilter({ popoverEnabled, selectFirstItem, excludedProperties, + hogQLTable, } - const logic = taxonomicFilterLogic(taxonomicFilterLogicProps) const { searchQuery, searchPlaceholder, activeTab } = useValues(logic) const { setSearchQuery, moveUp, moveDown, tabLeft, tabRight, selectSelected } = useActions(logic) diff --git a/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx b/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx index e9014b314ef91..f15d9b8778d3c 100644 --- a/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx +++ b/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx @@ -136,6 +136,7 @@ export const taxonomicFilterLogic = kea({ (taxonomicFilterLogicKey) => taxonomicFilterLogicKey, ], eventNames: [() => [(_, props) => props.eventNames], (eventNames) => eventNames ?? []], + hogQLTable: [() => [(_, props) => props.hogQLTable], (hogQLTable) => hogQLTable ?? 'events'], excludedProperties: [ () => [(_, props) => props.excludedProperties], (excludedProperties) => excludedProperties ?? {}, @@ -146,6 +147,7 @@ export const taxonomicFilterLogic = kea({ s.groupAnalyticsTaxonomicGroups, s.groupAnalyticsTaxonomicGroupNames, s.eventNames, + s.hogQLTable, s.excludedProperties, ], ( @@ -153,9 +155,10 @@ export const taxonomicFilterLogic = kea({ groupAnalyticsTaxonomicGroups, groupAnalyticsTaxonomicGroupNames, eventNames, + hogQLTable, excludedProperties ): TaxonomicFilterGroup[] => { - const groups = [ + const groups: TaxonomicFilterGroup[] = [ { name: 'Events', searchPlaceholder: 'events', @@ -429,6 +432,7 @@ export const taxonomicFilterLogic = kea({ type: TaxonomicFilterGroupType.HogQLExpression, render: InlineHogQLEditor, getPopoverHeader: () => 'HogQL', + componentProps: { hogQLTable }, }, ...groupAnalyticsTaxonomicGroups, ...groupAnalyticsTaxonomicGroupNames, diff --git a/frontend/src/lib/components/TaxonomicFilter/types.ts b/frontend/src/lib/components/TaxonomicFilter/types.ts index 5dd74ef575aae..8639f1644b74a 100644 --- a/frontend/src/lib/components/TaxonomicFilter/types.ts +++ b/frontend/src/lib/components/TaxonomicFilter/types.ts @@ -21,6 +21,7 @@ export interface TaxonomicFilterProps { selectFirstItem?: boolean /** use to filter results in a group by name, currently only working for EventProperties */ excludedProperties?: { [key in TaxonomicFilterGroupType]?: TaxonomicFilterValue[] } + hogQLTable?: string } export interface TaxonomicFilterLogicProps extends TaxonomicFilterProps { @@ -56,6 +57,7 @@ export interface TaxonomicFilterGroup { groupTypeIndex?: number getFullDetailUrl?: (instance: any) => string excludedProperties?: string[] + componentProps?: Record } export enum TaxonomicFilterGroupType { diff --git a/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx b/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx index 1a983d5717c8b..abf4589005691 100644 --- a/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx +++ b/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx @@ -20,6 +20,7 @@ export interface TaxonomicPopoverProps): JSX.Element { const [localValue, setLocalValue] = useState(value || ('' as ValueType)) @@ -85,6 +87,7 @@ export function TaxonomicPopover } diff --git a/frontend/src/queries/nodes/DataTable/DataTable.tsx b/frontend/src/queries/nodes/DataTable/DataTable.tsx index e6242a784ae0b..c834d3bf5903f 100644 --- a/frontend/src/queries/nodes/DataTable/DataTable.tsx +++ b/frontend/src/queries/nodes/DataTable/DataTable.tsx @@ -135,6 +135,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults } ? columnsInResponse ?? columnsInQuery : columnsInQuery const groupTypes = isPersonsQuery(query.source) ? personGroupTypes : eventGroupTypes + const hogQLTable = isPersonsQuery(query.source) ? 'persons' : 'events' const lemonColumns: LemonTableColumn[] = [ ...columnsInLemonTable.map((key, index) => ({ @@ -171,6 +172,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults } <>Edit column} type="tertiary" @@ -249,6 +251,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults } Add column left} data-attr="datatable-add-column-left" @@ -280,6 +283,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults } Add column right} data-attr="datatable-add-column-right" diff --git a/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx b/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx index 4b2ee5e19604d..3871966a7ba11 100644 --- a/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx +++ b/frontend/src/queries/nodes/PersonsNode/PersonPropertyFilters.tsx @@ -30,7 +30,8 @@ export function PersonPropertyFilters({ query, setQuery }: PersonPropertyFilters } }} pageKey={`PersonPropertyFilters.${id}`} - taxonomicGroupTypes={[TaxonomicFilterGroupType.PersonProperties]} + taxonomicGroupTypes={[TaxonomicFilterGroupType.PersonProperties, TaxonomicFilterGroupType.HogQLExpression]} + hogQLTable="persons" style={{ marginBottom: 0, marginTop: 0 }} /> ) : (