Issue #3223048 by smustgrave, Rishi Kulshreshtha, Theresa.Grannum, tim.plunkett, ranjith_kumar_k_u, larowlan, tedbow, oknate: Layout builder filter leaves blank space

(cherry picked from commit a5291f0bdf)
merge-requests/3235/merge
Lauri Eskola 2023-03-12 14:31:37 +02:00
parent 9dd37aa3ee
commit 9594732e51
No known key found for this signature in database
GPG Key ID: 382FC0F5B0DF53F8
2 changed files with 33 additions and 8 deletions

View File

@ -43,9 +43,16 @@
* The link to add the block. * The link to add the block.
*/ */
const toggleBlockEntry = (index, link) => { const toggleBlockEntry = (index, link) => {
const $link = $(link);
const textMatch = const textMatch =
link.textContent.toLowerCase().indexOf(query) !== -1; link.textContent.toLowerCase().indexOf(query) !== -1;
$(link).toggle(textMatch); // Checks if a category is currently hidden.
// Toggles the category on if so.
if ($link.closest('.js-layout-builder-category').is(':hidden')) {
$link.closest('.js-layout-builder-category').show();
}
// Toggle the li tag of the matching link.
$link.parent().toggle(textMatch);
}; };
// Filter if the length of the query is at least 2 characters. // Filter if the length of the query is at least 2 characters.
@ -82,15 +89,17 @@
.find('.js-layout-builder-category[remember-closed]') .find('.js-layout-builder-category[remember-closed]')
.removeAttr('open') .removeAttr('open')
.removeAttr('remember-closed'); .removeAttr('remember-closed');
// Show all categories since filter is turned off.
$categories.find('.js-layout-builder-category').show(); $categories.find('.js-layout-builder-category').show();
$filterLinks.show(); // Show all li tags since filter is turned off.
$filterLinks.parent().show();
announce(Drupal.t('All available blocks are listed.')); announce(Drupal.t('All available blocks are listed.'));
} }
}; };
$( $(
once('block-filter-text', 'input.js-layout-builder-filter', context), once('block-filter-text', 'input.js-layout-builder-filter', context),
).on('keyup', debounce(filterBlockList, 200)); ).on('input', debounce(filterBlockList, 200));
}, },
}; };

View File

@ -61,7 +61,7 @@ class BlockFilterTest extends WebDriverTestBase {
$assert_session->assertWaitOnAjaxRequest(); $assert_session->assertWaitOnAjaxRequest();
// Get all blocks, for assertions later. // Get all blocks, for assertions later.
$blocks = $page->findAll('css', '.js-layout-builder-block-link'); $blocks = $page->findAll('css', '.js-layout-builder-categories li');
$categories = $page->findAll('css', '.js-layout-builder-category'); $categories = $page->findAll('css', '.js-layout-builder-category');
$filter = $assert_session->elementExists('css', '.js-layout-builder-filter'); $filter = $assert_session->elementExists('css', '.js-layout-builder-filter');
@ -89,16 +89,32 @@ class BlockFilterTest extends WebDriverTestBase {
$fewer_blocks_message = ' blocks are available in the modified list'; $fewer_blocks_message = ' blocks are available in the modified list';
$this->assertAnnounceContains($fewer_blocks_message); $this->assertAnnounceContains($fewer_blocks_message);
$visible_rows = $this->filterVisibleElements($blocks); $visible_rows = $this->filterVisibleElements($blocks);
$this->assertGreaterThan(0, count($blocks)); $this->assertCount(4, $visible_rows);
$this->assertLessThan(count($blocks), count($visible_rows));
$visible_categories = $this->filterVisibleElements($categories); $visible_categories = $this->filterVisibleElements($categories);
$this->assertGreaterThan(0, count($visible_categories)); $this->assertCount(4, $visible_categories);
$this->assertLessThan(count($categories), count($visible_categories));
// Test Drupal.announce() message when multiple matches are present. // Test Drupal.announce() message when multiple matches are present.
$expected_message = count($visible_rows) . $fewer_blocks_message; $expected_message = count($visible_rows) . $fewer_blocks_message;
$this->assertAnnounceContains($expected_message); $this->assertAnnounceContains($expected_message);
// Test 3 letter search.
$filter->setValue('adm');
$visible_rows = $this->filterVisibleElements($blocks);
$this->assertCount(3, $visible_rows);
$visible_categories = $this->filterVisibleElements($categories);
$this->assertCount(3, $visible_categories);
// Retest that blocks appear when reducing letters.
$filter->setValue('ad');
$visible_rows = $this->filterVisibleElements($blocks);
$this->assertCount(4, $visible_rows);
$visible_categories = $this->filterVisibleElements($categories);
$this->assertCount(4, $visible_categories);
// Test blocks reappear after being filtered by repeating search for "a"
$filter->setValue('a');
$this->assertAnnounceContains('All available blocks are listed.');
// Test Drupal.announce() message when only one match is present. // Test Drupal.announce() message when only one match is present.
$filter->setValue('Powered by'); $filter->setValue('Powered by');
$this->assertAnnounceContains(' block is available'); $this->assertAnnounceContains(' block is available');