diff --git a/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx b/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx index fe73af65efb385..480c47d59ebb02 100644 --- a/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx +++ b/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx @@ -9,21 +9,26 @@ class SortLink extends React.Component { static propTypes = { title: PropTypes.string.isRequired, sortKey: PropTypes.string.isRequired, + defaultSort: PropTypes.string.isRequired, location: PropTypes.object.isRequired, }; + getCurrentSort() { + const {defaultSort, location} = this.props; + return location.query.sort ? location.query.sort : defaultSort; + } + getSort() { - const {sortKey, location} = this.props; + const {sortKey} = this.props; + const currentSort = this.getCurrentSort(); // Page is currently unsorted or is ascending - if (!location.query.sort || location.query.sort === `-${sortKey}`) { + if (currentSort === `-${sortKey}`) { return sortKey; } + // Reverse direction - if (location.query.sort === sortKey) { - return `-${sortKey}`; - } - return sortKey; + return `-${sortKey}`; } getTarget() { @@ -35,12 +40,13 @@ class SortLink extends React.Component { } renderChevron() { - const {location, sortKey} = this.props; - if (!location.query.sort || location.query.sort.indexOf(sortKey) === -1) { + const currentSort = this.getCurrentSort(); + const {sortKey} = this.props; + if (!currentSort || currentSort.indexOf(sortKey) === -1) { return null; } - if (location.query.sort[0] === '-') { + if (currentSort[0] === '-') { return ; } diff --git a/src/sentry/static/sentry/app/views/organizationEventsV2/table.jsx b/src/sentry/static/sentry/app/views/organizationEventsV2/table.jsx index 01bb1e73bc9f62..2a90023bbc7ccf 100644 --- a/src/sentry/static/sentry/app/views/organizationEventsV2/table.jsx +++ b/src/sentry/static/sentry/app/views/organizationEventsV2/table.jsx @@ -1,6 +1,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled, {css} from 'react-emotion'; +import {omit} from 'lodash'; import SentryTypes from 'app/sentryTypes'; import {Panel, PanelHeader, PanelBody, PanelItem} from 'app/components/panels'; @@ -65,7 +66,8 @@ export default class Table extends React.Component { render() { const {isLoading, location, view} = this.props; - const {fields} = view.data; + const {fields, sort} = view.data; + const defaultSort = sort.length ? sort[0] : null; return ( @@ -84,7 +86,12 @@ export default class Table extends React.Component { return ( - + ); })} @@ -128,6 +135,9 @@ const Cell = styled('div')` overflow: hidden; `; -const StyledPanelBody = styled(({isLoading, ...props}) => )` +const StyledPanelBody = styled(props => { + const otherProps = omit(props, 'isLoading'); + return ; +})` ${p => p.isLoading && 'min-height: 240px;'}; `; diff --git a/tests/js/spec/views/organizationEventsV2/index.spec.jsx b/tests/js/spec/views/organizationEventsV2/index.spec.jsx index 6c0cdc390d718e..deddc52d4bafbd 100644 --- a/tests/js/spec/views/organizationEventsV2/index.spec.jsx +++ b/tests/js/spec/views/organizationEventsV2/index.spec.jsx @@ -65,6 +65,39 @@ describe('OrganizationEventsV2', function() { expect(content.text()).toContain('You need at least one project to use this view'); }); + it('generates an active sort link based on default sort', function() { + const wrapper = mount( + , + TestStubs.routerContext() + ); + + const findLink = sortKey => + wrapper + .find('Table SortLink') + .find({sortKey}) + .find('StyledLink'); + + const timestamp = findLink('timestamp'); + // Sort should be active + expect( + timestamp + .find('InlineSvg') + .first() + .props().src + ).toEqual('icon-chevron-down'); + + // Sort link should reverse. + expect(timestamp.props().to.query).toEqual({sort: 'timestamp'}); + + const userlink = findLink('user'); + // User link should be descending. + expect(userlink.props().to.query).toEqual({sort: '-user'}); + }); + it('generates links to modals', async function() { const wrapper = mount(