fix(notebooks): use varying keys for action filters (#18591)

frontend/src/queries/nodes/InsightViz/TrendsSeries.tsx

@@ -1,7 +1,7 @@
 import { useValues, useActions } from 'kea'
 import { groupsModel } from '~/models/groupsModel'
 import { ActionFilter } from 'scenes/insights/filters/ActionFilter/ActionFilter'
-import { InsightType, FilterType } from '~/types'
+import { FilterType } from '~/types'
 import { alphabet } from 'lib/utils'
 import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFilterRow/ActionFilterRow'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
@@ -12,10 +12,15 @@ import { queryNodeToFilter } from '../InsightQuery/utils/queryNodeToFilter'
 import { actionsAndEventsToSeries } from '../InsightQuery/utils/filtersToQueryNode'
 
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
+import { insightLogic } from 'scenes/insights/insightLogic'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 
 export function TrendsSeries(): JSX.Element | null {
-    const { querySource, isTrends, isLifecycle, isStickiness, display, hasFormula } = useValues(insightVizDataLogic)
-    const { updateQuerySource } = useActions(insightVizDataLogic)
+    const { insightProps } = useValues(insightLogic)
+    const { querySource, isTrends, isLifecycle, isStickiness, display, hasFormula } = useValues(
+        insightVizDataLogic(insightProps)
+    )
+    const { updateQuerySource } = useActions(insightVizDataLogic(insightProps))
 
     const { groupsTaxonomicTypes } = useValues(groupsModel)
 
@@ -52,7 +57,7 @@ export function TrendsSeries(): JSX.Element | null {
                         | StickinessQuery
                         | LifecycleQuery)
                 }}
-                typeKey={`trends_${InsightType.TRENDS}_data_exploration`}
+                typeKey={`${keyForInsightLogicProps('new')(insightProps)}-TrendsSeries`}
                 buttonCopy={`Add graph ${hasFormula ? 'variable' : 'series'}`}
                 showSeriesIndicator
                 showNestedArrow

frontend/src/scenes/insights/EditorFilters/FunnelsQuerySteps.tsx

@@ -14,6 +14,7 @@ import { queryNodeToFilter } from '~/queries/nodes/InsightQuery/utils/queryNodeT
 import { actionsAndEventsToSeries } from '~/queries/nodes/InsightQuery/utils/filtersToQueryNode'
 import { FunnelsQuery } from '~/queries/schema'
 import { isInsightQueryNode } from '~/queries/utils'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 
 export const FUNNEL_STEP_COUNT_LIMIT = 20
 
@@ -50,7 +51,7 @@ export function FunnelsQuerySteps({ insightProps }: EditorFilterProps): JSX.Elem
                 bordered
                 filters={actionFilters}
                 setFilters={setActionFilters}
-                typeKey={`EditFunnel-action`}
+                typeKey={`${keyForInsightLogicProps('new')(insightProps)}-FunnelsQuerySteps`}
                 mathAvailability={MathAvailability.None}
                 hideDeleteBtn={filterSteps.length === 1}
                 buttonCopy="Add step"

frontend/src/scenes/insights/EditorFilters/RetentionSummary.tsx

@@ -15,6 +15,7 @@ import { Link } from 'lib/lemon-ui/Link'
 import { LemonInput, LemonSelect } from '@posthog/lemon-ui'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { IconInfo } from '@posthog/icons'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 
 export function RetentionSummary({ insightProps }: EditorFilterProps): JSX.Element {
     const { showGroupsOptions } = useValues(groupsModel)
@@ -52,7 +53,7 @@ export function RetentionSummary({ insightProps }: EditorFilterProps): JSX.Eleme
                                 updateInsightFilter({ target_entity: undefined })
                             }
                         }}
-                        typeKey="retention-table"
+                        typeKey={`${keyForInsightLogicProps('new')(insightProps)}-RetentionSummary`}
                     />
                 </span>
                 <LemonSelect

frontend/src/scenes/insights/filters/FunnelExclusionsFilter/FunnelExclusionsFilter.tsx

@@ -9,6 +9,7 @@ import { MathAvailability } from 'scenes/insights/filters/ActionFilter/ActionFil
 import { funnelDataLogic } from 'scenes/funnels/funnelDataLogic'
 import { ExclusionRowSuffix } from './ExclusionRowSuffix'
 import { ExclusionRow } from './ExclusionRow'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 
 export function FunnelExclusionsFilter(): JSX.Element {
     const { insightProps } = useValues(insightLogic)
@@ -35,7 +36,7 @@ export function FunnelExclusionsFilter(): JSX.Element {
             ref={ref}
             setFilters={setFilters}
             filters={exclusionFilters}
-            typeKey="funnel-exclusions-filter"
+            typeKey={`${keyForInsightLogicProps('new')(insightProps)}-FunnelExclusionsFilter`}
             addFilterDefaultOptions={{
                 id: '$pageview',
                 name: '$pageview',