From 56cf18ff29a7dc707bc68dc56b30b9364c082de7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Oberm=C3=BCller?= <thomas.obermueller@gmail.com>
Date: Tue, 14 Nov 2023 15:38:36 +0100
Subject: [PATCH] fix(notebooks): use varying keys for global filters (#18601)

---
 cypress/e2e/exports.cy.ts                                | 2 +-
 cypress/e2e/retention.cy.ts                              | 2 +-
 cypress/e2e/trends.cy.ts                                 | 2 +-
 cypress/productAnalytics/index.ts                        | 2 +-
 .../src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx  | 4 +++-
 .../PropertyGroupFilters/PropertyGroupFilters.tsx        | 9 +++++++--
 6 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/cypress/e2e/exports.cy.ts b/cypress/e2e/exports.cy.ts
index 6f48901de6303..46ce9dabffab9 100644
--- a/cypress/e2e/exports.cy.ts
+++ b/cypress/e2e/exports.cy.ts
@@ -15,7 +15,7 @@ describe('Exporting Insights', () => {
         )
         cy.visit(urls.insightNew())
         // apply filter
-        cy.get('[data-attr=insight-filters-add-filter-group]').click()
+        cy.get('[data-attr$=add-filter-group]').click()
         cy.get('[data-attr=property-select-toggle-0]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').click()
         cy.get('[data-attr=prop-filter-event_properties-1]').click({ force: true })
diff --git a/cypress/e2e/retention.cy.ts b/cypress/e2e/retention.cy.ts
index 4cc13baa89df3..155534da63ad9 100644
--- a/cypress/e2e/retention.cy.ts
+++ b/cypress/e2e/retention.cy.ts
@@ -15,7 +15,7 @@ describe('Retention', () => {
         // cy.get('[data-attr=insight-retention-add-filter-group]').click()
         // cy.get('[data-attr=property-select-toggle-0]').click()
 
-        cy.get('[data-attr=insight-filters-add-filter-group]').click()
+        cy.get('[data-attr$=add-filter-group]').click()
         cy.get('[data-attr=property-select-toggle-0]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').type('is_demo')
diff --git a/cypress/e2e/trends.cy.ts b/cypress/e2e/trends.cy.ts
index f04a247597cc2..4db6c8ee95a2e 100644
--- a/cypress/e2e/trends.cy.ts
+++ b/cypress/e2e/trends.cy.ts
@@ -92,7 +92,7 @@ describe('Trends', () => {
         cy.get('.taxonomic-infinite-list').find('.taxonomic-list-row').contains('Pageview').click({ force: true })
         cy.get('[data-attr=trend-element-subject-0]').should('have.text', 'Pageview')
 
-        cy.get('[data-attr=insight-filters-add-filter-group]').click()
+        cy.get('[data-attr$=add-filter-group]').click()
         cy.get('[data-attr=property-select-toggle-0]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').click()
         cy.get('[data-attr=prop-filter-event_properties-1]').click({ force: true })
diff --git a/cypress/productAnalytics/index.ts b/cypress/productAnalytics/index.ts
index a641cb3d0f56a..be38c6e01b393 100644
--- a/cypress/productAnalytics/index.ts
+++ b/cypress/productAnalytics/index.ts
@@ -55,7 +55,7 @@ export function interceptInsightLoad(insightType: string): string {
 
 export const insight = {
     applyFilter: (): void => {
-        cy.get('[data-attr=insight-filters-add-filter-group]').click()
+        cy.get('[data-attr$=add-filter-group]').click()
         cy.get('[data-attr=property-select-toggle-0]').click()
         cy.get('[data-attr=taxonomic-filter-searchfield]').click()
         cy.get('[data-attr=prop-filter-event_properties-1]').click({ force: true })
diff --git a/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx b/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx
index 81b5ae9d56b2c..4ac27f78933e1 100644
--- a/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx
+++ b/frontend/src/queries/nodes/InsightViz/GlobalAndOrFilters.tsx
@@ -7,6 +7,7 @@ import { getAllEventNames } from './utils'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { EditorFilterProps } from '~/types'
 import { StickinessQuery, TrendsQuery } from '~/queries/schema'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 
 export function GlobalAndOrFilters({ insightProps }: EditorFilterProps): JSX.Element {
     const { actions: allActions } = useValues(actionsModel)
@@ -27,7 +28,8 @@ export function GlobalAndOrFilters({ insightProps }: EditorFilterProps): JSX.Ele
 
     return (
         <PropertyGroupFilters
-            pageKey="insight-filters"
+            insightProps={insightProps}
+            pageKey={`${keyForInsightLogicProps('new')(insightProps)}-GlobalAndOrFilters`}
             query={querySource as TrendsQuery | StickinessQuery}
             setQuery={updateQuerySource}
             eventNames={getAllEventNames(querySource as TrendsQuery | StickinessQuery, allActions)}
diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx
index ba0abd3be7b46..85ddfae03059c 100644
--- a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx
+++ b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.tsx
@@ -1,5 +1,5 @@
 import { useValues, BindLogic, useActions } from 'kea'
-import { PropertyGroupFilterValue, AnyPropertyFilter } from '~/types'
+import { PropertyGroupFilterValue, AnyPropertyFilter, InsightLogicProps } from '~/types'
 import { TaxonomicFilterGroupType } from 'lib/components/TaxonomicFilter/types'
 import './PropertyGroupFilters.scss'
 import { propertyGroupFilterLogic } from './propertyGroupFilterLogic'
@@ -12,8 +12,10 @@ import { LemonButton, LemonDivider } from '@posthog/lemon-ui'
 import React from 'react'
 import { InsightQueryNode, StickinessQuery, TrendsQuery } from '~/queries/schema'
 import { AndOrFilterSelect } from './AndOrFilterSelect'
+import { keyForInsightLogicProps } from 'scenes/insights/sharedUtils'
 
 type PropertyGroupFiltersProps = {
+    insightProps: InsightLogicProps
     query: TrendsQuery | StickinessQuery
     setQuery: (node: TrendsQuery | StickinessQuery) => void
     pageKey: string
@@ -23,6 +25,7 @@ type PropertyGroupFiltersProps = {
 }
 
 export function PropertyGroupFilters({
+    insightProps,
     query,
     setQuery,
     pageKey,
@@ -104,7 +107,9 @@ export function PropertyGroupFilters({
                                                     onChange={(properties) => {
                                                         setPropertyFilters(properties, propertyGroupIndex)
                                                     }}
-                                                    pageKey={`insight-filters-${propertyGroupIndex}`}
+                                                    pageKey={`${keyForInsightLogicProps('new')(
+                                                        insightProps
+                                                    )}-PropertyGroupFilters-${propertyGroupIndex}`}
                                                     taxonomicGroupTypes={taxonomicGroupTypes}
                                                     eventNames={eventNames}
                                                     propertyGroupType={group.type}