add hogQLTable to taxonomic filter's HogQL editor

PostHog · Oct 3, 2023 · 189ba49 · 189ba49
1 parent f4884ed
commit 189ba49
Show file tree

Hide file tree

Showing 13 changed files with 40 additions and 7 deletions.
diff --git 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<HTMLTextAreaElement | null>(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
@@ -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<HTMLTextAreaElement | null>
 }
@@ -32,6 +33,7 @@ export const hogQLEditorLogic = kea<hogQLEditorLogicType>([
                     const response = await query<HogQLMetadata>({
                         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
@@ -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
@@ -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
@@ -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
@@ -60,7 +60,11 @@ export function InfiniteSelectResults({
     const RenderComponent = activeTaxonomicGroup?.render
 
     const listComponent = RenderComponent ? (
-        <RenderComponent value={value} onChange={(newValue) => selectItem(activeTaxonomicGroup, newValue, newValue)} />
+        <RenderComponent
+            {...(activeTaxonomicGroup?.componentProps ?? {})}
+            value={value}
+            onChange={(newValue) => selectItem(activeTaxonomicGroup, newValue, newValue)}
+        />
     ) : (
         <InfiniteList />
     )

diff --git 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 (
         <div className="px-2">
             <HogQLEditor
                 onChange={onChange}
                 value={String(value ?? '')}
+                hogQLTable={hogQLTable}
                 submitText={value ? 'Update HogQL expression' : 'Add HogQL expression'}
                 disableAutoFocus // :TRICKY: No autofocus here. It's controlled in the TaxonomicFilter.
             />

diff --git 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
@@ -136,6 +136,7 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
             (taxonomicFilterLogicKey) => taxonomicFilterLogicKey,
         ],
         eventNames: [() => [(_, props) => props.eventNames], (eventNames) => eventNames ?? []],
+        hogQLTable: [() => [(_, props) => props.hogQLTable], (hogQLTable) => hogQLTable ?? 'events'],
         excludedProperties: [
             () => [(_, props) => props.excludedProperties],
             (excludedProperties) => excludedProperties ?? {},
@@ -146,16 +147,18 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
                 s.groupAnalyticsTaxonomicGroups,
                 s.groupAnalyticsTaxonomicGroupNames,
                 s.eventNames,
+                s.hogQLTable,
                 s.excludedProperties,
             ],
             (
                 teamId,
                 groupAnalyticsTaxonomicGroups,
                 groupAnalyticsTaxonomicGroupNames,
                 eventNames,
+                hogQLTable,
                 excludedProperties
             ): TaxonomicFilterGroup[] => {
-                const groups = [
+                const groups: TaxonomicFilterGroup[] = [
                     {
                         name: 'Events',
                         searchPlaceholder: 'events',
@@ -429,6 +432,7 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>({
                         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
@@ -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<string, any>
 }
 
 export enum TaxonomicFilterGroupType {

diff --git a/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx b/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx
@@ -20,6 +20,7 @@ export interface TaxonomicPopoverProps<ValueType extends TaxonomicFilterValue =
     allowClear?: boolean
     style?: React.CSSProperties
     excludedProperties?: { [key in TaxonomicFilterGroupType]?: TaxonomicFilterValue[] }
+    hogQLTable?: string
 }
 
 /** Like TaxonomicPopover, but convenient when you know you will only use string values */
@@ -45,6 +46,7 @@ export function TaxonomicPopover<ValueType extends TaxonomicFilterValue = Taxono
     placeholderClass = 'text-muted',
     allowClear = false,
     excludedProperties,
+    hogQLTable,
     ...buttonPropsRest
 }: TaxonomicPopoverProps<ValueType>): JSX.Element {
     const [localValue, setLocalValue] = useState<ValueType>(value || ('' as ValueType))
@@ -85,6 +87,7 @@ export function TaxonomicPopover<ValueType extends TaxonomicFilterValue = Taxono
                         }}
                         taxonomicGroupTypes={groupTypes ?? [groupType]}
                         eventNames={eventNames}
+                        hogQLTable={hogQLTable}
                         excludedProperties={excludedProperties}
                     />
                 }

diff --git 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<DataTableRow, any>[] = [
         ...columnsInLemonTable.map((key, index) => ({
@@ -171,6 +172,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                         <TaxonomicPopover
                             groupType={TaxonomicFilterGroupType.HogQLExpression}
                             groupTypes={groupTypes}
+                            hogQLTable={hogQLTable}
                             value={key}
                             renderValue={() => <>Edit column</>}
                             type="tertiary"
@@ -249,6 +251,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                         <TaxonomicPopover
                             groupType={TaxonomicFilterGroupType.HogQLExpression}
                             groupTypes={groupTypes}
+                            hogQLTable={hogQLTable}
                             value={''}
                             placeholder={<span className="not-italic">Add column left</span>}
                             data-attr="datatable-add-column-left"
@@ -280,6 +283,7 @@ export function DataTable({ uniqueKey, query, setQuery, context, cachedResults }
                         <TaxonomicPopover
                             groupType={TaxonomicFilterGroupType.HogQLExpression}
                             groupTypes={groupTypes}
+                            hogQLTable={hogQLTable}
                             value={''}
                             placeholder={<span className="not-italic">Add column right</span>}
                             data-attr="datatable-add-column-right"

diff --git 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 }}
         />
     ) : (