From 34a47b7d9a01925c873711c424bd4483579fa2b0 Mon Sep 17 00:00:00 2001 From: Andrew Liu <159852527+aliu39@users.noreply.github.com> Date: Wed, 16 Apr 2025 12:51:00 -0700 Subject: [PATCH 1/2] ref(flags): hide disabled order by options and dont close sort tray on select --- .../app/components/events/featureFlags/featureFlagSort.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/static/app/components/events/featureFlags/featureFlagSort.tsx b/static/app/components/events/featureFlags/featureFlagSort.tsx index 82b98698aa2209..94fe8fd775bd88 100644 --- a/static/app/components/events/featureFlags/featureFlagSort.tsx +++ b/static/app/components/events/featureFlags/featureFlagSort.tsx @@ -54,6 +54,7 @@ export default function FeatureFlagSort({ setSortBy(selection.value); }} options={sortByOptions} + closeOnSelect={false} /> { setOrderBy(selection.value); }} - options={orderByOptions.map(o => { + options={orderByOptions.filter(o => { const selectionType = getSelectionType(o.value); - return selectionType === sortBy ? o : {...o, disabled: true}; + return selectionType === sortBy; })} + closeOnSelect={false} /> ); From 1836666e80a2698ee55b6c0d15f4f580581ed8a1 Mon Sep 17 00:00:00 2001 From: Andrew Liu <159852527+aliu39@users.noreply.github.com> Date: Wed, 16 Apr 2025 14:25:25 -0700 Subject: [PATCH 2/2] Update tests --- .../eventFeatureFlagList.spec.tsx | 28 +++++------------ .../featureFlags/featureFlagDrawer.spec.tsx | 30 ++++++++----------- 2 files changed, 21 insertions(+), 37 deletions(-) diff --git a/static/app/components/events/featureFlags/eventFeatureFlagList.spec.tsx b/static/app/components/events/featureFlags/eventFeatureFlagList.spec.tsx index 57e9cf38d1eb16..656c8eaff0e935 100644 --- a/static/app/components/events/featureFlags/eventFeatureFlagList.spec.tsx +++ b/static/app/components/events/featureFlags/eventFeatureFlagList.spec.tsx @@ -122,7 +122,6 @@ describe('EventFeatureFlagList', function () { expect(control).toBeInTheDocument(); await userEvent.click(control); await userEvent.click(screen.getByRole('option', {name: 'Alphabetical'})); - await userEvent.click(control); expect(screen.getByRole('option', {name: 'Alphabetical'})).toHaveAttribute( 'aria-selected', 'true' @@ -133,41 +132,27 @@ describe('EventFeatureFlagList', function () { ); }); - it('renders a sort dropdown which disables the appropriate options', async function () { + it('renders a sort dropdown which hides the invalid options', async function () { render(); const control = screen.getByRole('button', {name: 'Sort Flags'}); expect(control).toBeInTheDocument(); await userEvent.click(control); await userEvent.click(screen.getByRole('option', {name: 'Alphabetical'})); - await userEvent.click(control); expect(screen.getByRole('option', {name: 'Alphabetical'})).toHaveAttribute( 'aria-selected', 'true' ); - expect(screen.getByRole('option', {name: 'Newest First'})).toHaveAttribute( - 'aria-disabled', - 'true' - ); - expect(screen.getByRole('option', {name: 'Oldest First'})).toHaveAttribute( - 'aria-disabled', - 'true' - ); + expect(screen.queryByRole('option', {name: 'Newest First'})).not.toBeInTheDocument(); + expect(screen.queryByRole('option', {name: 'Oldest First'})).not.toBeInTheDocument(); await userEvent.click(screen.getByRole('option', {name: 'Evaluation Order'})); - await userEvent.click(control); expect(screen.getByRole('option', {name: 'Evaluation Order'})).toHaveAttribute( 'aria-selected', 'true' ); - expect(screen.getByRole('option', {name: 'Z-A'})).toHaveAttribute( - 'aria-disabled', - 'true' - ); - expect(screen.getByRole('option', {name: 'A-Z'})).toHaveAttribute( - 'aria-disabled', - 'true' - ); + expect(screen.queryByRole('option', {name: 'Z-A'})).not.toBeInTheDocument(); + expect(screen.queryByRole('option', {name: 'A-Z'})).not.toBeInTheDocument(); }); it('allows sort dropdown to affect displayed flags', async function () { @@ -188,6 +173,7 @@ describe('EventFeatureFlagList', function () { }); await userEvent.click(sortControl); await userEvent.click(screen.getByRole('option', {name: 'Oldest First'})); + await userEvent.click(sortControl); // close dropdown // expect enableReplay to be following webVitalsFlag expect( @@ -198,6 +184,7 @@ describe('EventFeatureFlagList', function () { await userEvent.click(sortControl); await userEvent.click(screen.getByRole('option', {name: 'Alphabetical'})); + await userEvent.click(sortControl); // close dropdown // expect enableReplay to be preceding webVitalsFlag, A-Z sort by default expect( @@ -208,6 +195,7 @@ describe('EventFeatureFlagList', function () { await userEvent.click(sortControl); await userEvent.click(screen.getByRole('option', {name: 'Z-A'})); + await userEvent.click(sortControl); // close dropdown // expect enableReplay to be following webVitalsFlag expect( diff --git a/static/app/components/events/featureFlags/featureFlagDrawer.spec.tsx b/static/app/components/events/featureFlags/featureFlagDrawer.spec.tsx index e35b2c4d2bfce2..89c49d472ff5a2 100644 --- a/static/app/components/events/featureFlags/featureFlagDrawer.spec.tsx +++ b/static/app/components/events/featureFlags/featureFlagDrawer.spec.tsx @@ -111,6 +111,7 @@ describe('FeatureFlagDrawer', function () { await userEvent.click( within(drawerScreen).getByRole('option', {name: 'Oldest First'}) ); + await userEvent.click(sortControl); // close dropdown // expect webVitalsFlag to be preceding enableReplay expect( @@ -123,8 +124,8 @@ describe('FeatureFlagDrawer', function () { await userEvent.click( within(drawerScreen).getByRole('option', {name: 'Alphabetical'}) ); - await userEvent.click(sortControl); await userEvent.click(within(drawerScreen).getByRole('option', {name: 'Z-A'})); + await userEvent.click(sortControl); // close dropdown // enableReplay follows webVitalsFlag in Z-A sort expect( @@ -157,7 +158,6 @@ describe('FeatureFlagDrawer', function () { await userEvent.click( within(drawerScreen).getByRole('option', {name: 'Alphabetical'}) ); - await userEvent.click(control); expect( within(drawerScreen).getByRole('option', {name: 'Alphabetical'}) ).toHaveAttribute('aria-selected', 'true'); @@ -167,7 +167,7 @@ describe('FeatureFlagDrawer', function () { ); }); - it('renders a sort dropdown which disables the appropriate options', async function () { + it('renders a sort dropdown which hides the invalid options', async function () { const drawerScreen = await renderFlagDrawer(); const control = within(drawerScreen).getByRole('button', {name: 'Sort Flags'}); @@ -176,31 +176,27 @@ describe('FeatureFlagDrawer', function () { await userEvent.click( within(drawerScreen).getByRole('option', {name: 'Alphabetical'}) ); - await userEvent.click(control); expect( within(drawerScreen).getByRole('option', {name: 'Alphabetical'}) ).toHaveAttribute('aria-selected', 'true'); expect( - within(drawerScreen).getByRole('option', {name: 'Newest First'}) - ).toHaveAttribute('aria-disabled', 'true'); + within(drawerScreen).queryByRole('option', {name: 'Newest First'}) + ).not.toBeInTheDocument(); expect( - within(drawerScreen).getByRole('option', {name: 'Oldest First'}) - ).toHaveAttribute('aria-disabled', 'true'); + within(drawerScreen).queryByRole('option', {name: 'Oldest First'}) + ).not.toBeInTheDocument(); await userEvent.click( within(drawerScreen).getByRole('option', {name: 'Evaluation Order'}) ); - await userEvent.click(control); expect( within(drawerScreen).getByRole('option', {name: 'Evaluation Order'}) ).toHaveAttribute('aria-selected', 'true'); - expect(within(drawerScreen).getByRole('option', {name: 'Z-A'})).toHaveAttribute( - 'aria-disabled', - 'true' - ); - expect(within(drawerScreen).getByRole('option', {name: 'A-Z'})).toHaveAttribute( - 'aria-disabled', - 'true' - ); + expect( + within(drawerScreen).queryByRole('option', {name: 'Z-A'}) + ).not.toBeInTheDocument(); + expect( + within(drawerScreen).queryByRole('option', {name: 'A-Z'}) + ).not.toBeInTheDocument(); }); });