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: ,
},
]}
+ data-attr="feature-flags-tab-navigation"
/>
)
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([
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 }) => ({