Sorting Query and Packs tables alphabetically (#1093)

This commit is contained in:
Kyle Knight 2017-01-25 08:31:29 -06:00 committed by GitHub
parent bd1ce34b90
commit 8f6cd65f4b
6 changed files with 17 additions and 13 deletions

View file

@ -1,6 +1,6 @@
import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
import { includes } from 'lodash';
import { includes, orderBy } from 'lodash';
import Checkbox from 'components/forms/fields/Checkbox';
import packInterface from 'interfaces/pack';
@ -85,7 +85,7 @@ class PacksList extends Component {
</thead>
<tbody>
{renderHelpText()}
{!!packs.length && packs.map(pack => renderPack(pack))}
{!!packs.length && orderBy(packs, ['name']).map(pack => renderPack(pack))}
</tbody>
</table>
);

View file

@ -1,6 +1,6 @@
import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
import { includes, size } from 'lodash';
import { includes, sortBy, size } from 'lodash';
import queryInterface from 'interfaces/query';
import Checkbox from 'components/forms/fields/Checkbox';
@ -101,7 +101,7 @@ class QueriesList extends Component {
</thead>
<tbody>
{renderHelpText()}
{!!queries.length && queries.map((query) => {
{!!queries.length && sortBy(queries, ['name']).map((query) => {
return (
<QueriesListRow
checked={this.isChecked(query)}

View file

@ -1,6 +1,6 @@
import React, { Component, PropTypes } from 'react';
import classnames from 'classnames';
import { includes, size } from 'lodash';
import { includes, sortBy, size } from 'lodash';
import queryInterface from 'interfaces/query';
import Icon from 'components/icons/Icon';
@ -110,7 +110,7 @@ class ScheduledQueriesList extends Component {
</thead>
<tbody>
{renderHelpText()}
{!!scheduledQueries.length && scheduledQueries.map((scheduledQuery) => {
{!!scheduledQueries.length && sortBy(scheduledQueries, ['name']).map((scheduledQuery) => {
return (
<QueriesListItem
checked={this.isChecked(scheduledQuery)}

View file

@ -1,6 +1,6 @@
import React, { Component, PropTypes } from 'react';
import AceEditor from 'react-ace';
import { isEqual } from 'lodash';
import { isEqual, sortBy } from 'lodash';
import Icon from 'components/icons/Icon';
import queryInterface from 'interfaces/query';
@ -34,7 +34,9 @@ class SearchPackQuery extends Component {
return { label: query.name, value: String(query.id) };
});
this.setState({ queryDropdownOptions });
this.setState({
queryDropdownOptions: sortBy(queryDropdownOptions, ['label']),
});
}
componentWillReceiveProps (nextProps) {
@ -45,7 +47,9 @@ class SearchPackQuery extends Component {
return { label: query.name, value: String(query.id) };
});
this.setState({ queryDropdownOptions });
this.setState({
queryDropdownOptions: sortBy(queryDropdownOptions, ['label']),
});
}
}

View file

@ -151,11 +151,11 @@ describe('AllPacksPage - component', () => {
const mockStore = reduxMockStore(store);
const Component = connectedComponent(ConnectedAllPacksPage, { mockStore });
const page = mount(Component).find('AllPacksPage');
const firstRow = page.find('Row').first();
const firstRow = page.find('Row').last();
expect(page.prop('selectedPack')).toNotExist();
firstRow.find('ClickableTableRow').first().simulate('click');
firstRow.find('ClickableTableRow').last().simulate('click');
const dispatchedActions = mockStore.getActions();
const locationChangeAction = find(dispatchedActions, { type: '@@router/CALL_HISTORY_METHOD' });

View file

@ -161,11 +161,11 @@ describe('ManageQueriesPage - component', () => {
const mockStore = reduxMockStore(store);
const Component = connectedComponent(ConnectedManageQueriesPage, { mockStore });
const page = mount(Component).find('ManageQueriesPage');
const firstRow = page.find('QueriesListRow').first();
const firstRow = page.find('QueriesListRow').last();
expect(page.prop('selectedQuery')).toNotExist();
firstRow.find('ClickableTableRow').first().simulate('click');
firstRow.find('ClickableTableRow').last().simulate('click');
const dispatchedActions = mockStore.getActions();
const locationChangeAction = find(dispatchedActions, { type: '@@router/CALL_HISTORY_METHOD' });