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 }) => ({