Commit 2c616129 authored by Dries's avatar Dries
Browse files

Issue #1919470 by s_leu, Berdir, Cottser, joelpittet, YesCT, Wim Leers: Add a...

Issue #1919470 by s_leu, Berdir, Cottser, joelpittet, YesCT, Wim Leers: Add a search field to the test overview page.
parent 4ab87f7e
...@@ -25,6 +25,26 @@ public function getFormID() { ...@@ -25,6 +25,26 @@ public function getFormID() {
* {@inheritdoc} * {@inheritdoc}
*/ */
public function buildForm(array $form, array &$form_state) { public function buildForm(array $form, array &$form_state) {
// JavaScript-only table filters.
$form['filters'] = array(
'#type' => 'container',
'#attributes' => array(
'class' => array('table-filter', 'js-show'),
),
);
$form['filters']['text'] = array(
'#type' => 'search',
'#title' => t('Search'),
'#size' => 30,
'#placeholder' => t('Enter test name…'),
'#attributes' => array(
'class' => array('table-filter-text'),
'data-table' => '#simpletest-test-form',
'autocomplete' => 'off',
'title' => t('Enter at least 3 characters of the test name or description to filter by.'),
),
);
$form['tests'] = array( $form['tests'] = array(
'#type' => 'details', '#type' => 'details',
'#title' => t('Tests'), '#title' => t('Tests'),
......
...@@ -6,18 +6,18 @@ ...@@ -6,18 +6,18 @@
* Add the cool table collapsing on the testing overview page. * Add the cool table collapsing on the testing overview page.
*/ */
Drupal.behaviors.simpleTestMenuCollapse = { Drupal.behaviors.simpleTestMenuCollapse = {
attach: function (context, settings) { attach: function (context) {
var timeout = null; var timeout = null;
// Adds expand-collapse functionality. // Adds expand-collapse functionality.
$('div.simpletest-image').once('simpletest-image', function () { $('div.simpletest-image').once('simpletest-image', function () {
var $this = $(this); var $this = $(this);
var direction = settings.simpleTest[this.id].imageDirection; var direction = drupalSettings.simpleTest[this.id].imageDirection;
$this.html(settings.simpleTest.images[direction]); $this.html(drupalSettings.simpleTest.images[direction]);
// Adds group toggling functionality to arrow images. // Adds group toggling functionality to arrow images.
$this.click(function () { $this.click(function () {
var trs = $this.closest('tbody').children('.' + settings.simpleTest[this.id].testClass); var trs = $this.closest('tbody').children('.' + drupalSettings.simpleTest[this.id].testClass);
var direction = settings.simpleTest[this.id].imageDirection; var direction = drupalSettings.simpleTest[this.id].imageDirection;
var row = direction ? trs.length - 1 : 0; var row = direction ? trs.length - 1 : 0;
// If clicked in the middle of expanding a group, stop so we can switch directions. // If clicked in the middle of expanding a group, stop so we can switch directions.
...@@ -49,8 +49,8 @@ Drupal.behaviors.simpleTestMenuCollapse = { ...@@ -49,8 +49,8 @@ Drupal.behaviors.simpleTestMenuCollapse = {
rowToggle(); rowToggle();
// Toggle the arrow image next to the test group title. // Toggle the arrow image next to the test group title.
$this.html(settings.simpleTest.images[(direction ? 0 : 1)]); $this.html(drupalSettings.simpleTest.images[(direction ? 0 : 1)]);
settings.simpleTest[this.id].imageDirection = !direction; drupalSettings.simpleTest[this.id].imageDirection = !direction;
}); });
}); });
...@@ -62,9 +62,9 @@ Drupal.behaviors.simpleTestMenuCollapse = { ...@@ -62,9 +62,9 @@ Drupal.behaviors.simpleTestMenuCollapse = {
* selected/deselected. * selected/deselected.
*/ */
Drupal.behaviors.simpleTestSelectAll = { Drupal.behaviors.simpleTestSelectAll = {
attach: function (context, settings) { attach: function (context) {
$('td.simpletest-select-all').once('simpletest-select-all', function () { $('td.simpletest-select-all').once('simpletest-select-all', function () {
var testCheckboxes = settings.simpleTest['simpletest-test-group-' + $(this).attr('id')].testNames; var testCheckboxes = drupalSettings.simpleTest['simpletest-test-group-' + $(this).attr('id')].testNames;
var groupCheckbox = $('<input type="checkbox" class="form-checkbox" id="' + $(this).attr('id') + '-select-all" />'); var groupCheckbox = $('<input type="checkbox" class="form-checkbox" id="' + $(this).attr('id') + '-select-all" />');
// Each time a single-test checkbox is checked or unchecked, make sure // Each time a single-test checkbox is checked or unchecked, make sure
...@@ -99,4 +99,62 @@ Drupal.behaviors.simpleTestSelectAll = { ...@@ -99,4 +99,62 @@ Drupal.behaviors.simpleTestSelectAll = {
} }
}; };
/**
* Filters the test list table by a text input search string.
*
* Additionally accounts for multiple tables being wrapped in "package" details
* elements.
*
* Text search input: input.table-filter-text
* Target table: input.table-filter-text[data-table]
* Source text: .table-filter-text-source
*/
Drupal.behaviors.simpletestTableFilterByText = {
attach: function (context) {
var $input = $('input.table-filter-text').once('table-filter-text');
var $table = $($input.attr('data-table'));
var $rows;
var searched = false;
function filterTestList (e) {
var query = $(e.target).val().toLowerCase();
function showTestRow (index, row) {
var $row = $(row);
var $sources = $row.find('.table-filter-text-source');
var textMatch = $sources.text().toLowerCase().indexOf(query) !== -1;
$row.closest('tr').toggle(textMatch);
}
// Filter if the length of the query is at least 3 characters.
if (query.length >= 3) {
// Indicate that a search has been performed, and hide the "select all"
// checkbox.
searched = true;
$('#simpletest-form-table thead th.select-all input').hide();
$rows.each(showTestRow);
}
// Restore to the original state if any searching has occurred.
else if (searched) {
searched = false;
$('#simpletest-form-table thead th.select-all input').show();
// Hide all rows and then show groups.
$rows.hide();
$rows.filter('.simpletest-group').show().each(function () {
var id = 'simpletest-test-group-' + $(this).children().first().attr('id');
if (drupalSettings.simpleTest[id].imageDirection) {
$(this).closest('tbody').children('.' + drupalSettings.simpleTest[id].testClass).show();
}
});
}
}
if ($table.length) {
$rows = $table.find('tbody tr');
$input.trigger('focus').on('keyup', Drupal.debounce(filterTestList, 200));
}
}
};
})(jQuery); })(jQuery);
...@@ -700,6 +700,7 @@ function simpletest_library_info() { ...@@ -700,6 +700,7 @@ function simpletest_library_info() {
array('system', 'drupalSettings'), array('system', 'drupalSettings'),
array('system', 'jquery.once'), array('system', 'jquery.once'),
array('system', 'drupal.tableselect'), array('system', 'drupal.tableselect'),
array('system', 'drupal.debounce'),
), ),
); );
......
...@@ -100,11 +100,11 @@ function theme_simpletest_test_table($variables) { ...@@ -100,11 +100,11 @@ function theme_simpletest_test_table($variables) {
); );
$row[] = array( $row[] = array(
'data' => '<label for="' . $test['#id'] . '">' . $title . '</label>', 'data' => '<label for="' . $test['#id'] . '">' . $title . '</label>',
'class' => array('simpletest-test-label'), 'class' => array('simpletest-test-label', 'table-filter-text-source'),
); );
$row[] = array( $row[] = array(
'data' => '<div class="description">' . $description . '</div>', 'data' => '<div class="description">' . format_string('@description (@class)', array('@description' => $description, '@class' => $test_name)) . '</div>',
'class' => array('simpletest-test-description'), 'class' => array('simpletest-test-description', 'table-filter-text-source'),
); );
$rows[] = array('data' => $row, 'class' => array($test_class . '-test', ($collapsed ? 'js-hide' : ''))); $rows[] = array('data' => $row, 'class' => array($test_class . '-test', ($collapsed ? 'js-hide' : '')));
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment