fix(data-warehouse): make sure taxonomic filter and popup are populat…

…ed when selected a data warehouse filter (#21021) * add fix * use props correctly * Update UI snapshots for `chromium` (1) * check null * Update UI snapshots for `chromium` (1) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Mar 21, 2024 · 888f2ee · 888f2ee
1 parent 7ac5d2b
commit 888f2ee
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 2 deletions.
diff --git a/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx b/frontend/src/lib/components/DefinitionPopover/DefinitionPopoverContents.tsx
@@ -111,8 +111,16 @@ function DefinitionView({ group }: { group: TaxonomicFilterGroup }): JSX.Element
     } = useValues(definitionPopoverLogic)
 
     const { setLocalDefinition } = useActions(definitionPopoverLogic)
+    const { selectedItemMeta } = useValues(taxonomicFilterLogic)
     const { selectItem } = useActions(taxonomicFilterLogic)
 
+    // Use effect here to make definition view stateful. TaxonomicFilterLogic won't mount within definitionPopoverLogic
+    useEffect(() => {
+        if (selectedItemMeta && definition.name == selectedItemMeta.id) {
+            setLocalDefinition(selectedItemMeta)
+        }
+    }, [definition])
+
     if (!definition) {
         return <></>
     }
@@ -280,6 +288,7 @@ function DefinitionView({ group }: { group: TaxonomicFilterGroup }): JSX.Element
             value: column.key,
         }))
         const itemValue = localDefinition ? group?.getValue?.(localDefinition) : null
+
         return (
             <form className="definition-popover-data-warehouse-schema-form">
                 <div className="flex flex-col justify-between gap-4">

diff --git a/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx b/frontend/src/lib/components/TaxonomicFilter/InfiniteList.tsx
@@ -173,7 +173,6 @@ export function InfiniteList({ popupAnchorElement }: InfiniteListProps): JSX.Ele
     const { mouseInteractionsEnabled, activeTab, searchQuery, value, groupType, eventNames } =
         useValues(taxonomicFilterLogic)
     const { selectItem } = useActions(taxonomicFilterLogic)
-
     const {
         isLoading,
         results,

diff --git a/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx b/frontend/src/lib/components/TaxonomicFilter/TaxonomicFilter.tsx
@@ -21,6 +21,7 @@ export function TaxonomicFilter({
     taxonomicFilterLogicKey: taxonomicFilterLogicKeyInput,
     groupType,
     value,
+    filter,
     onChange,
     onClose,
     taxonomicGroupTypes,
@@ -48,6 +49,7 @@ export function TaxonomicFilter({
         taxonomicFilterLogicKey,
         groupType,
         value,
+        filter,
         onChange,
         taxonomicGroupTypes,
         optionsFromProp,

diff --git a/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx b/frontend/src/lib/components/TaxonomicFilter/taxonomicFilterLogic.tsx
@@ -141,6 +141,7 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>([
         ],
     })),
     selectors({
+        selectedItemMeta: [() => [(_, props) => props.filter], (filter) => filter],
         taxonomicFilterLogicKey: [
             (_, p) => [p.taxonomicFilterLogicKey],
             (taxonomicFilterLogicKey) => taxonomicFilterLogicKey,
@@ -218,7 +219,7 @@ export const taxonomicFilterLogic = kea<taxonomicFilterLogicType>([
                         logic: dataWarehouseSceneLogic,
                         value: 'externalTables',
                         getName: (table: DataWarehouseTableType) => table.name,
-                        getValue: (table: DataWarehouseTableType) => table.id,
+                        getValue: (table: DataWarehouseTableType) => table.name,
                         getPopoverHeader: () => 'Data Warehouse Table',
                         getIcon: () => <IconServer />,
                     },

diff --git a/frontend/src/lib/components/TaxonomicFilter/types.ts b/frontend/src/lib/components/TaxonomicFilter/types.ts
@@ -1,6 +1,7 @@
 import Fuse from 'fuse.js'
 import { BuiltLogic, LogicWrapper } from 'kea'
 import { DataWarehouseTableType } from 'scenes/data-warehouse/types'
+import { LocalFilter } from 'scenes/insights/filters/ActionFilter/entityFilterLogic'
 
 import { AnyDataNode, DatabaseSchemaQueryResponseField } from '~/queries/schema'
 import {
@@ -22,6 +23,7 @@ export interface TaxonomicFilterProps {
     value?: TaxonomicFilterValue
     onChange?: (group: TaxonomicFilterGroup, value: TaxonomicFilterValue, item: any) => void
     onClose?: () => void
+    filter?: LocalFilter
     taxonomicGroupTypes: TaxonomicFilterGroupType[]
     taxonomicFilterLogicKey?: string
     optionsFromProp?: Partial<Record<TaxonomicFilterGroupType, SimpleOption[]>>

diff --git a/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx b/frontend/src/lib/components/TaxonomicPopover/TaxonomicPopover.tsx
@@ -4,6 +4,7 @@ import { TaxonomicFilterGroupType, TaxonomicFilterValue } from 'lib/components/T
 import { LemonButton, LemonButtonProps } from 'lib/lemon-ui/LemonButton'
 import { LemonDropdown } from 'lib/lemon-ui/LemonDropdown'
 import { useEffect, useState } from 'react'
+import { LocalFilter } from 'scenes/insights/filters/ActionFilter/entityFilterLogic'
 
 import { AnyDataNode, DatabaseSchemaQueryResponseField } from '~/queries/schema'
 
@@ -13,6 +14,7 @@ export interface TaxonomicPopoverProps<ValueType extends TaxonomicFilterValue =
     value?: ValueType
     onChange: (value: ValueType, groupType: TaxonomicFilterGroupType, item: any) => void
 
+    filter?: LocalFilter
     groupTypes?: TaxonomicFilterGroupType[]
     renderValue?: (value: ValueType) => JSX.Element | null
     eventNames?: string[]
@@ -41,6 +43,7 @@ export function TaxonomicStringPopover(props: TaxonomicPopoverProps<string>): JS
 export function TaxonomicPopover<ValueType extends TaxonomicFilterValue = TaxonomicFilterValue>({
     groupType,
     value,
+    filter,
     onChange,
     renderValue,
     groupTypes,
@@ -81,6 +84,7 @@ export function TaxonomicPopover<ValueType extends TaxonomicFilterValue = Taxono
                 <TaxonomicFilter
                     groupType={groupType}
                     value={value}
+                    filter={filter}
                     onChange={({ type }, payload, item) => {
                         onChange?.(payload as ValueType, type, item)
                         setVisible(false)

diff --git a/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx b/frontend/src/scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow.tsx
@@ -228,6 +228,7 @@ export function ActionFilterRow({
             fullWidth
             groupType={filter.type as TaxonomicFilterGroupType}
             value={getValue(value, filter)}
+            filter={filter}
             onChange={(changedValue, taxonomicGroupType, item) => {
                 const groupType = taxonomicFilterGroupTypeToEntityType(taxonomicGroupType)
                 if (groupType === EntityTypes.DATA_WAREHOUSE) {