fix(ui) Display implicit default sort and default to descending (#14042)

When switching sort columns it is preferrable to see the biggest value
first.

Each view has a default sort. Show that default sort in the sort
buttons so that the user knows which direction the data is sorted by
default.

Refs SEN-845

Author: markstory

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 <InlineSvg src="icon-chevron-down" />;
     }
 

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 (
       <Panel>
@@ -84,7 +86,12 @@ export default class Table extends React.Component {
 
             return (
               <HeaderItem key={field}>
-                <SortLink sortKey={sortKey} title={title} location={location} />
+                <SortLink
+                  defaultSort={defaultSort}
+                  sortKey={sortKey}
+                  title={title}
+                  location={location}
+                />
               </HeaderItem>
             );
           })}
@@ -128,6 +135,9 @@ const Cell = styled('div')`
   overflow: hidden;
 `;
 
-const StyledPanelBody = styled(({isLoading, ...props}) => <PanelBody {...props} />)`
+const StyledPanelBody = styled(props => {
+  const otherProps = omit(props, 'isLoading');
+  return <PanelBody {...otherProps} />;
+})`
   ${p => p.isLoading && 'min-height: 240px;'};
 `;

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(
+      <OrganizationEventsV2
+        organization={TestStubs.Organization({projects: [TestStubs.Project()]})}
+        location={{query: {}}}
+        router={{}}
+      />,
+      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(
       <OrganizationEventsV2