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(