FEATURE: Add dropdown to filter by selected in edit nav menu modal (#22251)

What does this change do?

This change adds a dropdown filter that allows a user to filter by
selected or unselected categories/tags in the edit navigation menu
modal.

For the categories modal, parent categories that do not match the
dropdown filter will be displayed as disabled since those parent
categories need to be displayed to maintain the hieracy of the child
child categories.

spec/system/editing_sidebar_categories_navigation_spec.rb

@@ -135,6 +135,52 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do
     expect(modal).to have_no_categories
   end
 
+  it "allows a user to filter the categories in the modal by selection" do
+    Fabricate(:category_sidebar_section_link, linkable: category_subcategory, user: user)
+    Fabricate(:category_sidebar_section_link, linkable: category2, user: user)
+
+    visit "/latest"
+
+    expect(sidebar).to have_categories_section
+
+    modal = sidebar.click_edit_categories_button
+    modal.filter_by_selected
+
+    expect(modal).to have_categories([category, category_subcategory, category2])
+    expect(modal).to have_checkbox(category, disabled: true)
+    expect(modal).to have_checkbox(category_subcategory)
+    expect(modal).to have_checkbox(category2)
+
+    modal.filter("category subcategory")
+
+    expect(modal).to have_categories([category, category_subcategory])
+    expect(modal).to have_checkbox(category, disabled: true)
+    expect(modal).to have_checkbox(category_subcategory)
+
+    modal.filter("").filter_by_unselected
+
+    expect(modal).to have_categories(
+      [category, category_subcategory2, category2, category2_subcategory],
+    )
+
+    expect(modal).to have_checkbox(category)
+    expect(modal).to have_checkbox(category_subcategory2)
+    expect(modal).to have_checkbox(category2, disabled: true)
+    expect(modal).to have_checkbox(category2_subcategory)
+
+    modal.filter_by_all
+
+    expect(modal).to have_categories(
+      [category, category_subcategory, category_subcategory2, category2, category2_subcategory],
+    )
+
+    expect(modal).to have_checkbox(category)
+    expect(modal).to have_checkbox(category_subcategory)
+    expect(modal).to have_checkbox(category_subcategory2)
+    expect(modal).to have_checkbox(category2)
+    expect(modal).to have_checkbox(category2_subcategory)
+  end
+
   describe "when max_category_nesting has been set to 3" do
     before_all { SiteSetting.max_category_nesting = 3 }
 

spec/system/editing_sidebar_tags_navigation_spec.rb

@@ -118,4 +118,30 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
     expect(sidebar).to have_section_link(tag2.name)
     expect(sidebar).to have_section_link(tag3.name)
   end
+
+  it "allows a user to filter the tag in the modal by selection" do
+    Fabricate(:tag_sidebar_section_link, linkable: tag1, user: user)
+    Fabricate(:tag_sidebar_section_link, linkable: tag2, user: user)
+
+    visit "/latest"
+
+    expect(sidebar).to have_tags_section
+
+    modal = sidebar.click_edit_tags_button
+    modal.filter_by_selected
+
+    expect(modal).to have_tag_checkboxes([tag1, tag2])
+
+    modal.filter("tag2")
+
+    expect(modal).to have_tag_checkboxes([tag2])
+
+    modal.filter("").filter_by_unselected
+
+    expect(modal).to have_tag_checkboxes([tag3])
+
+    modal.filter_by_all
+
+    expect(modal).to have_tag_checkboxes([tag1, tag2, tag3])
+  end
 end

spec/system/page_objects/modals/sidebar_edit_categories.rb

@@ -60,6 +60,12 @@ module PageObjects
 
         self
       end
+
+      def has_checkbox?(category, disabled: false)
+        has_selector?(
+          ".sidebar-categories-form-modal .sidebar-categories-form__category-row[data-category-id='#{category.id}'] .sidebar-categories-form__input#{disabled ? "[disabled]" : ""}",
+        )
+      end
     end
   end
 end

spec/system/page_objects/modals/sidebar_edit_navigation_modal.rb

@@ -31,6 +31,38 @@ module PageObjects
         click_button(I18n.t("js.sidebar.edit_navigation_modal_form.deselect_button_text"))
         self
       end
+
+      def filter_by_selected
+        dropdown_filter.select_row_by_name(
+          I18n.t("js.sidebar.edit_navigation_modal_form.filter_dropdown.selected"),
+        )
+
+        self
+      end
+
+      def filter_by_unselected
+        dropdown_filter.select_row_by_name(
+          I18n.t("js.sidebar.edit_navigation_modal_form.filter_dropdown.unselected"),
+        )
+
+        self
+      end
+
+      def filter_by_all
+        dropdown_filter.select_row_by_name(
+          I18n.t("js.sidebar.edit_navigation_modal_form.filter_dropdown.all"),
+        )
+
+        self
+      end
+
+      private
+
+      def dropdown_filter
+        PageObjects::Components::SelectKit.new(
+          ".sidebar__edit-navigation-modal-form__filter-dropdown",
+        )
+      end
     end
   end
 end