Issue #3472334: Project browser filters are conflicting after switching between different tabs

src/EnabledSourceHandler.php

@@ -158,16 +158,16 @@ class EnabledSourceHandler implements LoggerAwareInterface, EventSubscriberInter
 
     $projects = [];
     foreach ($this->getCurrentSources() as $source_name => $source) {
-      // Get tab-wise results based on category filter.
       if ($displayed_source && $displayed_source !== $source_name) {
         // If the source is not the one currently displayed in the UI, request
         // page 0.
         $query['page'] = 0;
-        $query['categories'] = implode(", ", $tabwise_categories[$source_name] ?? []);
       }
       else {
         $query['page'] = $page;
       }
+      // Get tab-wise results based on category filter.
+      $query['categories'] = implode(", ", $tabwise_categories[$source_name] ?? []);
       $projects[$source_name] = $source->getProjects($query);
     }
     return $projects;

sveltejs/src/ProjectBrowser.svelte

@@ -99,6 +99,10 @@
     }
     if ($moduleCategoryFilter && $moduleCategoryFilter.length) {
       searchParams.set('categories', $moduleCategoryFilter);
+      $categoryCheckedTrack[$activeTab] = $moduleCategoryFilter;
+    } else {
+      // If no category filter is set, reset the tracking for the active tab.
+      $categoryCheckedTrack[$activeTab] = [];
     }
     if ($filters.developmentStatus && $filters.developmentStatus.length) {
       searchParams.set('development_status', $filters.developmentStatus);
@@ -252,15 +256,6 @@
     if (event.detail.pluginId === $activeTab) {
       return;
     }
-    searchComponent.onSearch(event);
-    const { target } = event.detail.event;
-    const parent = target.parentNode;
-    // Remove all current selected tabs
-    parent
-      .querySelectorAll('[aria-selected="true"]')
-      .forEach((t) => t.setAttribute('aria-selected', false));
-    // Set this tab as selected
-    target.setAttribute('aria-selected', true);
     $categoryCheckedTrack[$activeTab] = $moduleCategoryFilter;
     $moduleCategoryFilter = [];
     $activeTab = event.detail.pluginId;
@@ -271,16 +266,20 @@
       typeof $categoryCheckedTrack[$activeTab] !== 'undefined'
         ? $categoryCheckedTrack[$activeTab]
         : [];
-
     $sortCriteria = SORT_OPTIONS[$activeTab];
     const sortMatch = $sortCriteria.find((option) => option.id === $sort);
     if (typeof sortMatch === 'undefined') {
       $sort = $sortCriteria[0].id;
     }
-    // Move to page 0 when switching sources as there's no guarantee the new
-    // source has enough results to reach whatever the current page is.
-    page.set(0);
-    await load(0);
+    searchComponent.onSearch(event);
+    const { target } = event.detail.event;
+    const parent = target.parentNode;
+    // Remove all current selected tabs
+    parent
+      .querySelectorAll('[aria-selected="true"]')
+      .forEach((t) => t.setAttribute('aria-selected', false));
+    // Set this tab as selected
+    target.setAttribute('aria-selected', true);
   }
 
   /**

sveltejs/src/Search/Search.svelte

@@ -10,6 +10,7 @@
     filters,
     filtersVocabularies,
     moduleCategoryFilter,
+    categoryCheckedTrack,
     moduleCategoryVocabularies,
     sort,
     searchString,
@@ -148,6 +149,7 @@
     $filters.securityCoverage = securityId;
     $filters = $filters;
     $moduleCategoryFilter = [];
+    $categoryCheckedTrack = {};
     onAdvancedFilter();
     onSelectCategory();
   };

tests/src/FunctionalJavascript/ProjectBrowserInstallerUiTest.php

@@ -306,9 +306,12 @@ class ProjectBrowserInstallerUiTest extends WebDriverTestBase {
     $download_button->click();
     $this->assertNotEmpty($assert_session->waitForButton('Install selected projects'));
     $page->pressButton('Install selected projects');
-    $installed = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator")
-      ?->waitFor(10, fn (NodeElement $button) => $button->getText() === '✓ Cream cheese on a bagel is Installed');
-    $this->assertTrue($installed);
+    $installed_action = $assert_session->waitForElementVisible('css', "$cream_cheese_module_selector .project_status-indicator", 30000);
+    $this->assertNotEmpty($installed_action);
+    $installed_action = $installed_action->waitFor(30, function ($button) {
+      return $button->getText() === '✓ Cream cheese on a bagel is Installed';
+    });
+    $this->assertTrue($installed_action);
   }
 
   /**

tests/src/FunctionalJavascript/ProjectBrowserUiTest.php

@@ -124,6 +124,8 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
 
     $this->drupalGet('admin/modules/browse');
     $this->svelteInitHelper('css', '.pb-filter__multi-dropdown');
+    // Initial results count on page load.
+    $this->assertTrue($assert_session->waitForText('9 Results'));
     // Open category drop-down.
     $this->clickWithWait('.pb-filter__multi-dropdown', 'E-commerce', TRUE);
 
@@ -149,6 +151,9 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
       'Astronaut Simulator',
     ], TRUE);
 
+    // Clear the checkbox to verify the results revert to their initial state.
+    $this->clickWithWait('#104', '9 Results');
+
     // Use blur event to close drop-down so Clear is visible.
     $this->assertSession()->elementExists('css', '.pb-filter__multi-dropdown')->blur();
 
@@ -718,11 +723,15 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
     $this->assertCount(2, $tab_count);
     // Get result count for first tab.
     $this->assertEquals('9 Results', $this->getElementText('.pb-search-results'));
+    // Get second tab text.
+    $second_tab_text = $assert_session->buttonExists('random_data')->getText();
 
     // Apply filters in project_browser_test_mock(first tab).
     $assert_session->waitForElement('css', '.views-exposed-form__item input[type="checkbox"]');
 
     $this->pressWithWait('Clear filters', '25 Results');
+    // Removing/applying filters will not change second tab results.
+    $this->assertSame($second_tab_text, $assert_session->buttonExists('random_data')->getText());
 
     // Open category drop-down.
     $this->clickWithWait('.pb-filter__multi-dropdown', 'E-commerce', TRUE);
@@ -730,30 +739,23 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
     // Click 'E-commerce' checkbox.
     $this->clickWithWait('#104');
 
-    // Click 'Media' checkbox.
+    // Click 'Media' checkbox. It will change results on first tab.
     $this->clickWithWait('#67', '20 Results');
+    // Applying filters will not change second tab results.
+    $this->assertSame($second_tab_text, $assert_session->buttonExists('random_data')->getText());
 
     // Use blur event to close drop-down so Clear is visible.
     $this->assertSession()->elementExists('css', '.pb-filter__multi-dropdown')->blur();
     $this->assertSame('E-commerce, Media', $page->find('css', '.pb-filter__multi-dropdown__label')->getText());
 
-    // Filter by search text.
-    $this->inputSearchField('Number');
-    $this->assertTrue($assert_session->waitForText('2 Results'));
-    $this->assertProjectsVisible([
-      '9 Starts With a Higher Number',
-      '1 Starts With a Number',
-    ]);
-
     // Click other tab.
     $this->pressWithWait('random_data');
     $this->svelteInitHelper('css', '.pb-filter__checkbox');
     $assert_session->elementsCount('css', '.pb-filter__checkbox', 20);
     $assert_session->waitForElementVisible('css', '#project-browser .pb-project');
     $this->assertNotEquals('9 Results Sorted by Active installs', $this->getElementText('.pb-search-results'));
-    $assert_session->waitForElementVisible('css', '#project-browser .pb-project');
-    $result_count_text = $page->find('css', '.pb-search-results')->getText();
-    $this->assertNotEquals('9 Results Sorted by Active installs', $result_count_text);
+    // Switching tab will not change result count.
+    $this->assertEquals($second_tab_text . ' (active tab)', $page->findButton('random_data')->getText());
 
     // Open category drop-down again by pressing space.
     $this->assertSession()->elementExists('css', '.pb-filter__multi-dropdown')->keyDown(' ');
@@ -761,6 +763,8 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
     // Apply the second module category filter.
     $second_category_filter_selector = '.pb-filter__multi-dropdown__items > .pb-filter__checkbox-label:nth-child(2) input';
     $this->clickWithWait("$second_category_filter_selector");
+    // Applying filter on second tab will change result count.
+    $this->assertNotSame($second_tab_text, $assert_session->buttonExists('random_data')->getText());
     // Assert that the filters persist.
     $dropdown_items = $page->find('css', '.pb-filter__multi-dropdown__items');
     $labels = $dropdown_items->findAll('css', '.pb-filter__checkbox-label-txt');
@@ -773,17 +777,11 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
 
     // Switch back to first tab.
     $this->pressWithWait('project_browser_test_mock');
-    // Assert that the filters persist.
-    $this->assertTrue($assert_session->waitForText('2 Results'));
     $this->assertSame('E-commerce, Media', $page->find('css', '.pb-filter__multi-dropdown__label')->getText());
     $first_filter_element = $page->find('css', 'p.filter-applied:nth-child(1)');
     $this->assertEquals('E-commerce', $first_filter_element->find('css', '.filter-applied__label')->getText());
     $second_filter_element = $page->find('css', 'p.filter-applied:nth-child(2)');
     $this->assertEquals('Media', $second_filter_element->find('css', '.filter-applied__label')->getText());
-    $this->assertProjectsVisible([
-      '9 Starts With a Higher Number',
-      '1 Starts With a Number',
-    ]);
 
     // Again switch to second tab.
     $this->pressWithWait('random_data');
@@ -794,6 +792,28 @@ class ProjectBrowserUiTest extends WebDriverTestBase {
     // Assert that the number of results is the same.
     $results_after = count($page->findAll('css', '#project-browser .pb-project.list'));
     $this->assertEquals($results_before, $results_after);
+
+    // Switch back to first tab.
+    $this->pressWithWait('project_browser_test_mock');
+    // Filter by search text.
+    $this->inputSearchField('Number');
+    $this->assertTrue($assert_session->waitForText('2 Results'));
+    $this->assertProjectsVisible([
+      '9 Starts With a Higher Number',
+      '1 Starts With a Number',
+    ]);
+    // Again switch to second tab.
+    $this->pressWithWait('random_data');
+    $this->pressWithWait('Clear filters');
+    // Switch back to first tab.
+    $this->pressWithWait('project_browser_test_mock');
+    $this->svelteInitHelper('css', '#project-browser .pb-project');
+    // Assert that the filters persist.
+    $this->assertTrue($assert_session->waitForText('2 Results'));
+    $this->assertProjectsVisible([
+      '9 Starts With a Higher Number',
+      '1 Starts With a Number',
+    ]);
   }
 
   /**

tests/src/FunctionalJavascript/ProjectBrowserUiTestJsonApi.php

@@ -113,6 +113,8 @@ class ProjectBrowserUiTestJsonApi extends WebDriverTestBase {
 
     $this->drupalGet('admin/modules/browse');
     $this->svelteInitHelper('css', '.pb-filter__multi-dropdown');
+    // Initial results count on page load.
+    $this->assertTrue($assert_session->waitForText('4,523 Results'));
     // Open category drop-down.
     $this->clickWithWait('.pb-filter__multi-dropdown', 'E-commerce', TRUE);
 
@@ -137,7 +139,13 @@ class ProjectBrowserUiTestJsonApi extends WebDriverTestBase {
       'Commerce Core', 'AddToAny Share Buttons', 'Fivestar', 'Commerce Shipping', 'Physical Fields', 'Commerce Stock', 'Entity Registration', 'Commerce Feeds', 'Currency', 'Commerce Migrate', 'Payment', 'Commerce Stripe',
     ], TRUE);
 
-    $this->pressWithWait('Clear filters', '197 Results');
+    // Clear the checkbox to verify the results revert to their initial state.
+    $this->clickWithWait('.pb-filter__multi-dropdown', 'E-commerce', TRUE);
+    $this->svelteInitHelper('css', '#acc38507-ac85-43e6-8f32-beb3febea93f');
+    $this->clickWithWait('#acc38507-ac85-43e6-8f32-beb3febea93f', '4,523 Results');
+    $this->assertSession()->elementExists('css', '.pb-filter__multi-dropdown')->blur();
+
+    $this->pressWithWait('Clear filters', '7,236 Results');
 
     // Open category drop-down.
     $this->clickWithWait('.pb-filter__multi-dropdown', 'E-commerce', TRUE);
@@ -373,6 +381,8 @@ class ProjectBrowserUiTestJsonApi extends WebDriverTestBase {
     $this->assertCount(2, $tab_count);
     // Get result count for first tab.
     $assert_session->pageTextContains('4,523 Results');
+    // Get second tab text.
+    $second_tab_text = $assert_session->buttonExists('random_data')->getText();
 
     // Apply filters in project_browser_test_mock(first tab).
     $assert_session->waitForElement('css', '.search__filter-button');
@@ -383,22 +393,17 @@ class ProjectBrowserUiTestJsonApi extends WebDriverTestBase {
     $this->clickWithWait('.pb-filter__multi-dropdown', 'E-commerce', TRUE);
 
     // Click 'E-commerce' checkbox.
-    $this->clickWithWait('#acc38507-ac85-43e6-8f32-beb3febea93f');
+    $this->clickWithWait('#acc38507-ac85-43e6-8f32-beb3febea93f', '357 Results');
 
-    // Click 'Commerce/Advertising' checkbox.
+    // Clicking the 'Commerce/Advertising' checkbox updates first tab results.
     $this->clickWithWait('#23d470f6-ffde-4034-a6ef-492b7121b9cf', '557 Results');
+    // Applying filters will not change second tab results.
+    $this->assertSame($second_tab_text, $assert_session->buttonExists('random_data')->getText());
 
     // Use blur event to close drop-down so Clear is visible.
     $this->assertSession()->elementExists('css', '.pb-filter__multi-dropdown')->blur();
     $this->assertSame('Commerce/Advertising, E-commerce', $page->find('css', '.pb-filter__multi-dropdown__label')->getText());
 
-    // Filter by search text.
-    $this->inputSearchField('th');
-    $this->assertTrue($assert_session->waitForText('2 Results'));
-    $this->assertProjectsVisible([
-      'GDPR OneTrust', 'Commerce GoCardless Client',
-    ]);
-
     // Click other tab.
     $this->pressWithWait('random_data');
     $assert_session->waitForElementVisible('css', '#project-browser .pb-project');
@@ -426,16 +431,12 @@ class ProjectBrowserUiTestJsonApi extends WebDriverTestBase {
 
     // Switch back to first tab.
     $page->pressButton('drupalorg_jsonapi');
-    // Assert that the filters persist.
-    $this->assertTrue($assert_session->waitForText('2 Results'));
+    $this->assertTrue($this->assertSession()->waitForText('Commerce/Advertising'));
     $first_filter_element = $page->find('css', 'p.filter-applied:nth-child(1)');
     $this->assertEquals('Commerce/Advertising', $first_filter_element->find('css', '.filter-applied__label')->getText());
     $second_filter_element = $page->find('css', 'p.filter-applied:nth-child(2)');
     $this->assertEquals('E-commerce', $second_filter_element->find('css', '.filter-applied__label')->getText());
     $this->assertSame('Commerce/Advertising, E-commerce', $page->find('css', '.pb-filter__multi-dropdown__label')->getText());
-    $this->assertProjectsVisible([
-      'GDPR OneTrust', 'Commerce GoCardless Client',
-    ]);
 
     // Again switch to second tab.
     $page->pressButton('random_data');
@@ -446,6 +447,27 @@ class ProjectBrowserUiTestJsonApi extends WebDriverTestBase {
     // Assert that the number of results is the same.
     $results_after = count($page->findAll('css', '#project-browser .pb-project.pb-project--list'));
     $this->assertEquals($results_before, $results_after);
+
+    // Switch back to first tab.
+    $this->pressWithWait('drupalorg_jsonapi');
+    // Filter by search text.
+    $this->inputSearchField('th');
+    $this->assertTrue($assert_session->waitForText('2 Results'));
+    $this->assertProjectsVisible([
+      'GDPR OneTrust',
+      'Commerce GoCardless Client',
+    ]);
+    // Again switch to second tab.
+    $this->pressWithWait('random_data');
+    // Switch back to first tab.
+    $this->pressWithWait('drupalorg_jsonapi');
+    $this->svelteInitHelper('css', '#project-browser .pb-project');
+    // Assert that the filters persist.
+    $this->assertTrue($assert_session->waitForText('2 Results'));
+    $this->assertProjectsVisible([
+      'GDPR OneTrust',
+      'Commerce GoCardless Client',
+    ]);
   }
 
   /**