From 92abf85161c8ef79a59b80508ddf43c8f97d335e Mon Sep 17 00:00:00 2001 From: Mark Story Date: Tue, 16 Jul 2019 13:59:41 -0400 Subject: [PATCH 1/3] fix(ui) Default sort columns to descending when switching When switching sort columns it is preferrable to see the biggest value first. Refs SEN-845 --- .../app/views/organizationEventsV2/sortLink.jsx | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx b/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx index fe73af65efb385..e9222d2f6983dc 100644 --- a/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx +++ b/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx @@ -15,15 +15,19 @@ class SortLink extends React.Component { getSort() { const {sortKey, location} = this.props; + // Page has no explicit sorting + if (!location.query.sort) { + // Default to descending + return `-${sortKey}`; + } + // Page is currently unsorted or is ascending - if (!location.query.sort || location.query.sort === `-${sortKey}`) { + if (location.query.sort === `-${sortKey}`) { return sortKey; } + // Reverse direction - if (location.query.sort === sortKey) { - return `-${sortKey}`; - } - return sortKey; + return `-${sortKey}`; } getTarget() { From 8eddbdba27303ba525c1dc8190baf870dfe86968 Mon Sep 17 00:00:00 2001 From: Mark Story Date: Tue, 16 Jul 2019 15:54:11 -0400 Subject: [PATCH 2/3] fix(ui) Display implicit default sort 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 --- .../views/organizationEventsV2/sortLink.jsx | 24 ++++++++++--------- .../app/views/organizationEventsV2/table.jsx | 16 ++++++++++--- 2 files changed, 26 insertions(+), 14 deletions(-) diff --git a/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx b/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx index e9222d2f6983dc..13bda028e9c38b 100644 --- a/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx +++ b/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx @@ -9,20 +9,21 @@ class SortLink extends React.Component { static propTypes = { title: PropTypes.string.isRequired, sortKey: PropTypes.string.isRequired, + implicitSort: PropTypes.string, location: PropTypes.object.isRequired, }; - getSort() { - const {sortKey, location} = this.props; + getCurrentSort() { + const {implicitSort, location} = this.props; + return location.query.sort ? location.query.sort : implicitSort; + } - // Page has no explicit sorting - if (!location.query.sort) { - // Default to descending - return `-${sortKey}`; - } + getSort() { + const {sortKey} = this.props; + const currentSort = this.getCurrentSort(); // Page is currently unsorted or is ascending - if (location.query.sort === `-${sortKey}`) { + if (currentSort === `-${sortKey}`) { return sortKey; } @@ -39,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..706b003dfa9ac1 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;'}; `; From 63b04f10cca61c1ae3b81c9d6f71c94400470c86 Mon Sep 17 00:00:00 2001 From: Mark Story Date: Tue, 16 Jul 2019 17:56:15 -0400 Subject: [PATCH 3/3] Rename prop to defaultSort & add tests Add an integration test for the sort link direction handling. --- .../views/organizationEventsV2/sortLink.jsx | 6 ++-- .../app/views/organizationEventsV2/table.jsx | 2 +- .../views/organizationEventsV2/index.spec.jsx | 33 +++++++++++++++++++ 3 files changed, 37 insertions(+), 4 deletions(-) diff --git a/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx b/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx index 13bda028e9c38b..480c47d59ebb02 100644 --- a/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx +++ b/src/sentry/static/sentry/app/views/organizationEventsV2/sortLink.jsx @@ -9,13 +9,13 @@ class SortLink extends React.Component { static propTypes = { title: PropTypes.string.isRequired, sortKey: PropTypes.string.isRequired, - implicitSort: PropTypes.string, + defaultSort: PropTypes.string.isRequired, location: PropTypes.object.isRequired, }; getCurrentSort() { - const {implicitSort, location} = this.props; - return location.query.sort ? location.query.sort : implicitSort; + const {defaultSort, location} = this.props; + return location.query.sort ? location.query.sort : defaultSort; } getSort() { diff --git a/src/sentry/static/sentry/app/views/organizationEventsV2/table.jsx b/src/sentry/static/sentry/app/views/organizationEventsV2/table.jsx index 706b003dfa9ac1..2a90023bbc7ccf 100644 --- a/src/sentry/static/sentry/app/views/organizationEventsV2/table.jsx +++ b/src/sentry/static/sentry/app/views/organizationEventsV2/table.jsx @@ -87,7 +87,7 @@ export default class Table extends React.Component { return ( , + 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(