FIX: Disable filter when loading tags in edit nav menu tags modal (#23789)

Why this change?

When we're in the midst of loading more tags, the filter dropdown
is still enabled and may result in us firing off multiple requests to
the server to load more tags. This makes the loading hard to reason
about in the tests environment and has led to flaky tests.

What does this change do?

This changes disables the filter dropdown when more tags are being
loading.

app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/modal.hbs

@@ -40,7 +40,7 @@
           @value={{this.filterDropdownValue}}
           @content={{this.filterDropdownContent}}
           @onChange={{this.onFilterDropdownChange}}
-          @options={{hash showCaret=true}}
+          @options={{hash showCaret=true disabled=@loading}}
         />
       </div>
     </div>

app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.hbs

@@ -16,6 +16,7 @@
   @filterSelected={{this.filterSelected}}
   @filterUnselected={{this.filterUnselected}}
   @closeModal={{@closeModal}}
+  @loading={{this.tagsLoading}}
 >
   {{#if this.tagsLoading}}
     {{loading-spinner size="large"}}

app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.js

@@ -15,7 +15,7 @@ export default class extends Component {
   @tracked onlySelected = false;
   @tracked onlyUnSelected = false;
   @tracked tags = [];
-  @tracked tagsLoading = true;
+  @tracked tagsLoading;
   @tracked selectedTags = [...this.currentUser.sidebarTagNames];
 
   constructor() {
@@ -43,11 +43,13 @@ export default class extends Component {
     await this.store
       .findAll("listTag", findArgs)
       .then((tags) => {
-        this.tagsLoading = false;
         this.tags = tags;
       })
       .catch((error) => {
         popupAjaxError(error);
+      })
+      .finally(() => {
+        this.tagsLoading = false;
       });
   }
 

spec/system/editing_sidebar_tags_navigation_spec.rb

@@ -157,6 +157,9 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
     expect(sidebar).to have_tags_section
 
     modal = sidebar.click_edit_tags_button
+
+    expect(modal).to have_tag_checkboxes([tag1, tag2, tag3, tag4])
+
     modal.filter_by_selected
 
     expect(modal).to have_tag_checkboxes([tag1, tag2])

spec/system/page_objects/components/select_kit.rb

@@ -38,6 +38,10 @@ module PageObjects
         has_css?(context + ":not(.is-expanded)", wait: 0)
       end
 
+      def is_not_disabled?
+        has_css?(@context + ":not(.disabled)", wait: 0)
+      end
+
       def has_selected_value?(value)
         component.find(".select-kit-header[data-value='#{value}']")
       end

spec/system/page_objects/modals/sidebar_edit_navigation_modal.rb

@@ -67,7 +67,9 @@ module PageObjects
       private
 
       def dropdown_filter
-        PageObjects::Components::SelectKit.new(".sidebar__edit-navigation-menu__filter-dropdown")
+        PageObjects::Components::SelectKit.new(
+          ".sidebar__edit-navigation-menu__filter-dropdown",
+        ).tap(&:is_not_disabled?)
       end
     end
   end