From 10e1d464840e9261f7c6625e575ca0301944128d Mon Sep 17 00:00:00 2001 From: Vu Luong Date: Tue, 5 Jul 2022 13:08:34 -0700 Subject: [PATCH 1/2] ref(performance): Use CompactSelect for transaction list filter --- .../components/discover/transactionsList.tsx | 17 +++--- .../discover/transactionsList.spec.jsx | 55 +++++++++++++------ .../performance/transactionSummary.spec.tsx | 4 +- 3 files changed, 49 insertions(+), 27 deletions(-) diff --git a/static/app/components/discover/transactionsList.tsx b/static/app/components/discover/transactionsList.tsx index c8f44806ce5eda..7af045b77d8df8 100644 --- a/static/app/components/discover/transactionsList.tsx +++ b/static/app/components/discover/transactionsList.tsx @@ -6,8 +6,7 @@ import {Location, LocationDescriptor, Query} from 'history'; import GuideAnchor from 'sentry/components/assistant/guideAnchor'; import Button from 'sentry/components/button'; import DiscoverButton from 'sentry/components/discoverButton'; -import DropdownButton from 'sentry/components/dropdownButton'; -import DropdownControl, {DropdownItem} from 'sentry/components/dropdownControl'; +import CompactSelect from 'sentry/components/forms/compactSelect'; import Pagination, {CursorHandler} from 'sentry/components/pagination'; import {t} from 'sentry/locale'; import space from 'sentry/styles/space'; @@ -176,7 +175,13 @@ class _TransactionsList extends Component { return (
- handleDropdownChange(opt.value)} + /> + {/* ( { {label} ))} - + */}
{!this.isTrend() && (handleOpenAllEventsClick ? ( @@ -378,10 +383,6 @@ const Header = styled('div')` align-items: center; `; -const StyledDropdownButton = styled(DropdownButton)` - min-width: 145px; -`; - const StyledPagination = styled(Pagination)` margin: 0 0 0 ${space(1)}; `; diff --git a/tests/js/spec/components/discover/transactionsList.spec.jsx b/tests/js/spec/components/discover/transactionsList.spec.jsx index d49d86ed538965..217686db4c1b1a 100644 --- a/tests/js/spec/components/discover/transactionsList.spec.jsx +++ b/tests/js/spec/components/discover/transactionsList.spec.jsx @@ -1,5 +1,8 @@ +import {act} from 'react-dom/test-utils'; + import {mountWithTheme} from 'sentry-test/enzyme'; import {initializeOrg} from 'sentry-test/initializeOrg'; +import {triggerPress} from 'sentry-test/utils'; import {Client} from 'sentry/api'; import TransactionsList from 'sentry/components/discover/transactionsList'; @@ -146,9 +149,21 @@ describe('TransactionsList', function () { }); }); - const selectDropdownOption = (w, selection) => { - w.find('DropdownControl').first().simulate('click'); - w.find(`DropdownItem[data-test-id="option-${selection}"] span`).simulate('click'); + const openDropdown = async w => { + await act(async () => { + triggerPress(w.find('CompactSelect Button')); + await tick(); + w.update(); + }); + }; + + const selectDropdownOption = async (w, selection) => { + await openDropdown(w); + await act(async () => { + triggerPress(w.find(`MenuItemWrap[value="${selection}"]`)); + await tick(); + w.update(); + }); }; describe('with eventsv2', function () { @@ -168,8 +183,9 @@ describe('TransactionsList', function () { await tick(); wrapper.update(); - expect(wrapper.find('DropdownControl')).toHaveLength(1); - expect(wrapper.find('DropdownItem')).toHaveLength(2); + expect(wrapper.find('CompactSelect')).toHaveLength(1); + await openDropdown(wrapper); + expect(wrapper.find('MenuItemWrap')).toHaveLength(2); expect(wrapper.find('DiscoverButton')).toHaveLength(1); expect(wrapper.find('Pagination')).toHaveLength(1); expect(wrapper.find('PanelTable')).toHaveLength(1); @@ -201,8 +217,9 @@ describe('TransactionsList', function () { await tick(); wrapper.update(); - expect(wrapper.find('DropdownControl')).toHaveLength(1); - expect(wrapper.find('DropdownItem')).toHaveLength(3); + expect(wrapper.find('CompactSelect')).toHaveLength(1); + await openDropdown(wrapper); + expect(wrapper.find('MenuItemWrap')).toHaveLength(3); expect(wrapper.find('DiscoverButton')).toHaveLength(0); expect(wrapper.find('Pagination')).toHaveLength(1); expect(wrapper.find('PanelTable')).toHaveLength(1); @@ -279,7 +296,7 @@ describe('TransactionsList', function () { expect(wrapper.find('GridCell').last().text()).toEqual('/b'); expect(wrapper.find('GridCellNumber').last().text()).toEqual('1000'); - selectDropdownOption(wrapper, 'count'); + await selectDropdownOption(wrapper, 'count'); await tick(); wrapper.update(); @@ -350,8 +367,9 @@ describe('TransactionsList', function () { wrapper.update(); expect(wrapper.find('LoadingIndicator')).toHaveLength(0); - expect(wrapper.find('DropdownControl')).toHaveLength(1); - expect(wrapper.find('DropdownItem')).toHaveLength(2); + expect(wrapper.find('CompactSelect')).toHaveLength(1); + await openDropdown(wrapper); + expect(wrapper.find('MenuItemWrap')).toHaveLength(2); expect(wrapper.find('DiscoverButton')).toHaveLength(1); expect(wrapper.find('Pagination')).toHaveLength(1); expect(wrapper.find('PanelTable')).toHaveLength(1); @@ -383,8 +401,9 @@ describe('TransactionsList', function () { await tick(); wrapper.update(); - expect(wrapper.find('DropdownControl')).toHaveLength(1); - expect(wrapper.find('DropdownItem')).toHaveLength(2); + expect(wrapper.find('CompactSelect')).toHaveLength(1); + await openDropdown(wrapper); + expect(wrapper.find('MenuItemWrap')).toHaveLength(2); expect(wrapper.find('DiscoverButton')).toHaveLength(1); expect(wrapper.find('Pagination')).toHaveLength(1); expect(wrapper.find('PanelTable')).toHaveLength(1); @@ -416,8 +435,9 @@ describe('TransactionsList', function () { await tick(); wrapper.update(); - expect(wrapper.find('DropdownControl')).toHaveLength(1); - expect(wrapper.find('DropdownItem')).toHaveLength(3); + expect(wrapper.find('CompactSelect')).toHaveLength(1); + await openDropdown(wrapper); + expect(wrapper.find('MenuItemWrap')).toHaveLength(3); expect(wrapper.find('DiscoverButton')).toHaveLength(0); expect(wrapper.find('Pagination')).toHaveLength(1); expect(wrapper.find('PanelTable')).toHaveLength(1); @@ -494,7 +514,7 @@ describe('TransactionsList', function () { expect(wrapper.find('GridCell').last().text()).toEqual('/b'); expect(wrapper.find('GridCellNumber').last().text()).toEqual('1000'); - selectDropdownOption(wrapper, 'count'); + await selectDropdownOption(wrapper, 'count'); await tick(); wrapper.update(); @@ -565,8 +585,9 @@ describe('TransactionsList', function () { wrapper.update(); expect(wrapper.find('LoadingIndicator')).toHaveLength(0); - expect(wrapper.find('DropdownControl')).toHaveLength(1); - expect(wrapper.find('DropdownItem')).toHaveLength(2); + expect(wrapper.find('CompactSelect')).toHaveLength(1); + await openDropdown(wrapper); + expect(wrapper.find('MenuItemWrap')).toHaveLength(2); expect(wrapper.find('DiscoverButton')).toHaveLength(1); expect(wrapper.find('Pagination')).toHaveLength(1); expect(wrapper.find('PanelTable')).toHaveLength(1); diff --git a/tests/js/spec/views/performance/transactionSummary.spec.tsx b/tests/js/spec/views/performance/transactionSummary.spec.tsx index 282ef23ba6c571..f01dc73c2042ec 100644 --- a/tests/js/spec/views/performance/transactionSummary.spec.tsx +++ b/tests/js/spec/views/performance/transactionSummary.spec.tsx @@ -606,7 +606,7 @@ describe('Performance > TransactionSummary', function () { screen.getByRole('button', {name: 'Filter Slow Transactions (p95)'}) ); - userEvent.click(screen.getByRole('button', {name: 'Slow Transactions (p95)'})); + userEvent.click(screen.getAllByText('Slow Transactions (p95)')[1]); // Check the navigation. expect(browserHistory.push).toHaveBeenCalledWith({ @@ -1014,7 +1014,7 @@ describe('Performance > TransactionSummary', function () { screen.getByRole('button', {name: 'Filter Slow Transactions (p95)'}) ); - userEvent.click(screen.getByRole('button', {name: 'Slow Transactions (p95)'})); + userEvent.click(screen.getAllByText('Slow Transactions (p95)')[1]); // Check the navigation. expect(browserHistory.push).toHaveBeenCalledWith({ From cf9b09caab514f33f4788d334ff5954a26ce55c5 Mon Sep 17 00:00:00 2001 From: Vu Luong Date: Wed, 6 Jul 2022 09:16:14 -0700 Subject: [PATCH 2/2] ref(discover): Remove comment in TransactionsList --- .../components/discover/transactionsList.tsx | 24 ------------------- 1 file changed, 24 deletions(-) diff --git a/static/app/components/discover/transactionsList.tsx b/static/app/components/discover/transactionsList.tsx index 7af045b77d8df8..2da0590c262390 100644 --- a/static/app/components/discover/transactionsList.tsx +++ b/static/app/components/discover/transactionsList.tsx @@ -181,30 +181,6 @@ class _TransactionsList extends Component { options={options} onChange={opt => handleDropdownChange(opt.value)} /> - {/* ( - - {selected.label} - - )} - > - {options.map(({value, label}) => ( - - {label} - - ))} - */} {!this.isTrend() && (handleOpenAllEventsClick ? (