From a41bd2d4f9c2e7c77e143e30c8eccdaaebf2a1b7 Mon Sep 17 00:00:00 2001
From: Haven <haven@posthog.com>
Date: Mon, 18 Nov 2024 17:17:43 -0800
Subject: [PATCH] fix(flags): prevent kea logic loop and clean filters on tab
 switch (#26258)

---
 cypress/e2e/featureFlags.cy.ts                |  8 +++---
 .../scenes/feature-flags/featureFlagsLogic.ts | 25 ++++++-------------
 2 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/cypress/e2e/featureFlags.cy.ts b/cypress/e2e/featureFlags.cy.ts
index 75f07c59cb6..2dceb97af6b 100644
--- a/cypress/e2e/featureFlags.cy.ts
+++ b/cypress/e2e/featureFlags.cy.ts
@@ -17,10 +17,8 @@ describe('Feature Flags', () => {
     })
 
     it('Display product introduction when no feature flags exist', () => {
-        // ensure unique names to avoid clashes
         cy.get('[data-attr=top-bar-name]').should('contain', 'Feature flags')
-        cy.get('[data-attr=new-feature-flag]').click()
-        cy.contains('Create your first feature flag').should('exist')
+        cy.contains('Welcome to Feature flags!').should('exist')
     })
 
     it('Create feature flag', () => {
@@ -104,6 +102,7 @@ describe('Feature Flags', () => {
         cy.get('[data-attr=feature-flag-key]').focus().type(name).should('have.value', name)
         cy.get('[data-attr=rollout-percentage]').type('{selectall}50').should('have.value', '50')
         cy.get('[data-attr=save-feature-flag]').first().click()
+        cy.get('[data-attr=toast-close-button]').click()
 
         // after save there should be a delete button
         cy.get('[data-attr="more-button"]').click()
@@ -336,6 +335,9 @@ describe('Feature Flags', () => {
 
         cy.get('[data-attr=feature-flags-tab-navigation]').contains('Overview').click()
         cy.url().should('include', `tab=overview`)
+
+        cy.get('[data-attr=feature-flags-tab-navigation]').contains('History').click()
+        cy.url().should('include', `tab=history`)
     })
 
     it('Renders flags in FlagSelector', () => {
diff --git a/frontend/src/scenes/feature-flags/featureFlagsLogic.ts b/frontend/src/scenes/feature-flags/featureFlagsLogic.ts
index 8c11216de81..9ad6e03a4fb 100644
--- a/frontend/src/scenes/feature-flags/featureFlagsLogic.ts
+++ b/frontend/src/scenes/feature-flags/featureFlagsLogic.ts
@@ -180,6 +180,10 @@ export const featureFlagsLogic = kea<featureFlagsLogicType>([
             await breakpoint(300)
             actions.loadFeatureFlags()
         },
+        setActiveTab: () => {
+            // Don't carry over pagination from previous tab
+            actions.setFeatureFlagsFilters({ page: 1 }, true)
+        },
     })),
     actionToUrl(({ values }) => {
         const changeUrl = ():
@@ -231,25 +235,10 @@ export const featureFlagsLogic = kea<featureFlagsLogicType>([
                 order,
             }
 
-            if (active !== undefined) {
-                pageFiltersFromUrl.active = String(active)
-            }
+            pageFiltersFromUrl.active = active !== undefined ? String(active) : undefined
+            pageFiltersFromUrl.page = page !== undefined ? parseInt(page) : undefined
 
-            if (page !== undefined) {
-                pageFiltersFromUrl.page = parseInt(page)
-            }
-
-            // 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 })
-            }
+            actions.setFeatureFlagsFilters({ ...DEFAULT_FILTERS, ...pageFiltersFromUrl })
         },
     })),
     events(({ actions }) => ({