Skip to content

ref(flags): hide disabled order by options and dont close sort tray on select #89797

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aliu39 merged 2 commits into from
Apr 16, 2025
Merged

ref(flags): hide disabled order by options and dont close sort tray on select #89797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
34a47b7
ref(flags): hide disabled order by options and dont close sort tray o…
aliu39 Apr 16, 2025
1836666
Update tests
aliu39 Apr 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 8 additions & 20 deletions static/app/components/events/featureFlags/eventFeatureFlagList.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand All @@ -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(<EventFeatureFlagList {...MOCK_DATA_SECTION_PROPS} />);

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 () {
Expand All @@ -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(
Expand All @@ -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(
Expand All @@ -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(
Expand Down
30 changes: 13 additions & 17 deletions static/app/components/events/featureFlags/featureFlagDrawer.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand All @@ -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(
Expand Down Expand Up @@ -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');
Expand All @@ -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'});
Expand All @@ -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();
});
});
6 changes: 4 additions & 2 deletions static/app/components/events/featureFlags/featureFlagSort.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,17 +54,19 @@ export default function FeatureFlagSort({
setSortBy(selection.value);
}}
options={sortByOptions}
closeOnSelect={false}
/>
<CompositeSelect.Region
label={t('Order By')}
value={orderBy}
onChange={selection => {
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}
/>
</CompositeSelect>
);
Expand Down