From e2f4caf21894f4b826c0282859e715d5e9d08c13 Mon Sep 17 00:00:00 2001
From: Haven <haven@posthog.com>
Date: Mon, 18 Nov 2024 13:04:38 -0800
Subject: [PATCH] fix(flags): prevent kea logic loop when switching tabs in FF
 UI (#26257)

---
 cypress/e2e/featureFlags.cy.ts                       | 12 +++++++++++-
 frontend/src/scenes/feature-flags/FeatureFlags.tsx   |  1 +
 .../src/scenes/feature-flags/featureFlagsLogic.ts    | 12 +++++++++++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/cypress/e2e/featureFlags.cy.ts b/cypress/e2e/featureFlags.cy.ts
index abb1c40e522..75f07c59cb6 100644
--- a/cypress/e2e/featureFlags.cy.ts
+++ b/cypress/e2e/featureFlags.cy.ts
@@ -308,7 +308,8 @@ describe('Feature Flags', () => {
         cy.get('.operator-value-option').contains('> after').should('not.exist')
     })
 
-    it('Allow setting multivariant rollout percentage to zero', () => {
+    it('Allows setting multivariant rollout percentage to zero', () => {
+        cy.get('[data-attr=top-bar-name]').should('contain', 'Feature flags')
         // Start creating a multivariant flag
         cy.get('[data-attr=new-feature-flag]').click()
         cy.get('[data-attr=feature-flag-served-value-segmented-button]')
@@ -328,6 +329,15 @@ describe('Feature Flags', () => {
         cy.get('[data-attr=feature-flag-variant-rollout-percentage-input]').click().type(`4.5`).should('have.value', 4)
     })
 
+    it('Sets URL properly when switching between tabs', () => {
+        cy.get('[data-attr=top-bar-name]').should('contain', 'Feature flags')
+        cy.get('[data-attr=feature-flags-tab-navigation]').contains('History').click()
+        cy.url().should('include', `tab=history`)
+
+        cy.get('[data-attr=feature-flags-tab-navigation]').contains('Overview').click()
+        cy.url().should('include', `tab=overview`)
+    })
+
     it('Renders flags in FlagSelector', () => {
         // Create flag name
         cy.get('[data-attr=top-bar-name]').should('contain', 'Feature flags')
diff --git a/frontend/src/scenes/feature-flags/FeatureFlags.tsx b/frontend/src/scenes/feature-flags/FeatureFlags.tsx
index d8e72f25f7d..9bd9ba3d39b 100644
--- a/frontend/src/scenes/feature-flags/FeatureFlags.tsx
+++ b/frontend/src/scenes/feature-flags/FeatureFlags.tsx
@@ -436,6 +436,7 @@ export function FeatureFlags(): JSX.Element {
                         content: <ActivityLog scope={ActivityScope.FEATURE_FLAG} />,
                     },
                 ]}
+                data-attr="feature-flags-tab-navigation"
             />
         </div>
     )
diff --git a/frontend/src/scenes/feature-flags/featureFlagsLogic.ts b/frontend/src/scenes/feature-flags/featureFlagsLogic.ts
index b39b7d052d2..8c11216de81 100644
--- a/frontend/src/scenes/feature-flags/featureFlagsLogic.ts
+++ b/frontend/src/scenes/feature-flags/featureFlagsLogic.ts
@@ -239,7 +239,17 @@ export const featureFlagsLogic = kea<featureFlagsLogicType>([
                 pageFiltersFromUrl.page = parseInt(page)
             }
 
-            actions.setFeatureFlagsFilters({ ...DEFAULT_FILTERS, ...pageFiltersFromUrl })
+            // Initialize filters with the URL params if none are set
+            const isInitializingFilters =
+                objectsEqual(DEFAULT_FILTERS, values.filters) && !objectsEqual(DEFAULT_FILTERS, pageFiltersFromUrl)
+            /**
+             * Pagination search param in the URL is modified directly by the LemonTable component,
+             * so let's update filter state if it changes
+             */
+            const isChangingPage = page !== undefined && page !== values.filters.page
+            if (isInitializingFilters || isChangingPage) {
+                actions.setFeatureFlagsFilters({ ...DEFAULT_FILTERS, ...pageFiltersFromUrl })
+            }
         },
     })),
     events(({ actions }) => ({