diff --git a/package.json b/package.json index 13dea2d..b7a4b47 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "moment": "^2.24.0", "nconf": "^0.10.0", "react": "^16.8.6", + "react-beautiful-dnd": "^13.0.0", "react-bootstrap": "^1.0.0-beta.9", "react-bootstrap-table-next": "^3.1.5", "react-dom": "^16.8.6", diff --git a/server/index.js b/server/index.js index f5df845..2447bc0 100644 --- a/server/index.js +++ b/server/index.js @@ -53,7 +53,7 @@ app.post('/api/test', (req, res) => { TastyRunner.setFilters(filters); - TastyRunner.run(filters.type, isParallel, [], { + TastyRunner.run(filters.type, isParallel, filters.tests, { onTestEnd: () => { done ++; io.emit('tests:test:finished', Math.round((done / tests) * 100)); diff --git a/src/subpages/Tests.js b/src/subpages/Tests.js index 4d4919c..9c1d6ed 100644 --- a/src/subpages/Tests.js +++ b/src/subpages/Tests.js @@ -1,5 +1,6 @@ import React from 'react'; import { Badge, Button, Col, ListGroup, Row, Spinner, Toast, ProgressBar, Form } from 'react-bootstrap'; +import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'; import _ from 'lodash'; import * as api from '../api'; import { FaPlay as Run } from 'react-icons/fa'; @@ -130,7 +131,9 @@ class Tests extends React.Component { if (_.includes(selected, test)) { this.setState({ selected: _.pull(selected, test) }); } else { - this.setState({ selected: [ ...this.state.selected, test ] }); + const newValue = this._mapSelectedValues(this.state.tests, [ ...this.state.selected, test ]); + + this.setState({ selected: newValue }); } }; @@ -234,6 +237,21 @@ class Tests extends React.Component { }) }; + handleDragEnd = (res) => { + if (!res.destination) return; + + const newValue = _.cloneDeep(this.state.tests); + const [removed] = newValue.splice(res.source.index, 1); + newValue.splice(res.destination.index, 0, removed); + + let newSelected = this._mapSelectedValues(newValue, this.state.selected); + + this.setState({ + tests: newValue, + selected: newSelected, + }) + }; + render() { const { tests, errors, percentage, isParallelMode } = this.state; @@ -275,19 +293,44 @@ class Tests extends React.Component { - - {tests.map(test => ( - this.handleToggle(test)} - active={_.includes(this.state.selected, test)} - > -
{test.name}
- {test.path} -
- ))} -
+ + + {provided => ( +
+ + {tests.map((test, index) => ( + + {provided => ( +
+ this.handleToggle(test)} + active={_.find(this.state.selected, test)} + > +
{test.name}
+ {test.path} +
+
+ )} +
+ ))} + {provided.placeholder} +
+
+ )} +
+
@@ -321,6 +364,8 @@ class Tests extends React.Component { ); } + + _mapSelectedValues = (testArray, selectedArray) => _.compact(testArray.map(test => _.find(selectedArray, test))); } export default Tests;