DEV: Fix edit nav menu modals not appearing on mobile (#22403)

What is the problem?

This regressed in fe294ab1a77c1026b6996550eb8c36b6f07e1b73 and we did
not have any tests on mobile to catch the regression. The problem was
that we were conditionally rendering the edit nav menu modals component
in the sidebar. However, the sidebar is collapsed on mobile when a
button is clicked. When the sidebar collapses, the edit nav menu modals
ended up being destroyed with it.

app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.hbs

@@ -3,7 +3,7 @@
   @headerLinkText={{i18n "sidebar.sections.categories.header_link_text"}}
   @headerActions={{array
     (hash
-      action=(fn (mut this.isModalVisible) true)
+      action=this.showModal
       title=(i18n "sidebar.sections.categories.header_action_title")
     )
   }}
@@ -47,9 +47,3 @@
     />
   {{/if}}
 </Sidebar::Section>
-
-{{#if this.isModalVisible}}
-  <Sidebar::EditNavigationMenu::CategoriesModal
-    @closeModal={{fn (mut this.isModalVisible) false}}
-  />
-{{/if}}

app/assets/javascripts/discourse/app/components/sidebar/user/categories-section.js

@@ -1,10 +1,12 @@
+import { action } from "@ember/object";
 import { inject as service } from "@ember/service";
-import { cached, tracked } from "@glimmer/tracking";
+import { cached } from "@glimmer/tracking";
 
 import { debounce } from "discourse-common/utils/decorators";
 import Category from "discourse/models/category";
 import SidebarCommonCategoriesSection from "discourse/components/sidebar/common/categories-section";
 import { hasDefaultSidebarCategories } from "discourse/lib/sidebar/helpers";
+import SidebarEditNavigationMenuCategoriesModal from "discourse/components/sidebar/edit-navigation-menu/categories-modal";
 
 export const REFRESH_COUNTS_APP_EVENT_NAME =
   "sidebar:refresh-categories-section-counts";
@@ -15,8 +17,6 @@ export default class SidebarUserCategoriesSection extends SidebarCommonCategorie
   @service modal;
   @service router;
 
-  @tracked isModalVisible = false;
-
   constructor() {
     super(...arguments);
 
@@ -64,4 +64,9 @@ export default class SidebarUserCategoriesSection extends SidebarCommonCategorie
   get hasDefaultSidebarCategories() {
     return hasDefaultSidebarCategories(this.siteSettings);
   }
+
+  @action
+  showModal() {
+    this.modal.show(SidebarEditNavigationMenuCategoriesModal);
+  }
 }

app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.hbs

@@ -3,7 +3,7 @@
   @headerLinkText={{i18n "sidebar.sections.tags.header_link_text"}}
   @headerActions={{array
     (hash
-      action=(fn (mut this.isModalVisible) true)
+      action=this.showModal
       title=(i18n "sidebar.sections.tags.header_action_title")
     )
   }}
@@ -45,9 +45,3 @@
     />
   {{/if}}
 </Sidebar::Section>
-
-{{#if this.isModalVisible}}
-  <Sidebar::EditNavigationMenu::TagsModal
-    @closeModal={{fn (mut this.isModalVisible) false}}
-  />
-{{/if}}

app/assets/javascripts/discourse/app/components/sidebar/user/tags-section.js

@@ -1,10 +1,12 @@
-import { cached, tracked } from "@glimmer/tracking";
+import { action } from "@ember/object";
+import { cached } from "@glimmer/tracking";
 import { inject as service } from "@ember/service";
 
 import SidebarCommonTagsSection from "discourse/components/sidebar/common/tags-section";
 import TagSectionLink from "discourse/lib/sidebar/user/tags-section/tag-section-link";
 import PMTagSectionLink from "discourse/lib/sidebar/user/tags-section/pm-tag-section-link";
 import { hasDefaultSidebarTags } from "discourse/lib/sidebar/helpers";
+import SidebarEditNavigationMenuTagsModal from "discourse/components/sidebar/edit-navigation-menu/tags-modal";
 
 export default class SidebarUserTagsSection extends SidebarCommonTagsSection {
   @service currentUser;
@@ -14,8 +16,6 @@ export default class SidebarUserTagsSection extends SidebarCommonTagsSection {
   @service siteSettings;
   @service topicTrackingState;
 
-  @tracked isModalVisible = false;
-
   constructor() {
     super(...arguments);
 
@@ -78,4 +78,9 @@ export default class SidebarUserTagsSection extends SidebarCommonTagsSection {
   get hasDefaultSidebarTags() {
     return hasDefaultSidebarTags(this.siteSettings);
   }
+
+  @action
+  showModal() {
+    this.modal.show(SidebarEditNavigationMenuTagsModal);
+  }
 }

spec/system/editing_sidebar_categories_navigation_spec.rb

@@ -23,9 +23,12 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do
 
   before { sign_in(user) }
 
-  it "allows a user to edit the sidebar categories navigation" do
+  shared_examples "a user can edit the sidebar categories navigation" do |mobile|
+    it "allows a user to edit the sidebar categories navigation", mobile: mobile do
       visit "/latest"
 
+      sidebar.open_on_mobile if mobile
+
       expect(sidebar).to have_categories_section
 
       modal = sidebar.click_edit_categories_button
@@ -49,12 +52,17 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do
         .save
 
       expect(modal).to be_closed
+
+      sidebar.open_on_mobile if mobile
+
       expect(sidebar).to have_section_link(category.name)
       expect(sidebar).to have_section_link(category_subcategory2.name)
       expect(sidebar).to have_section_link(category2.name)
 
       visit "/latest"
 
+      sidebar.open_on_mobile if mobile
+
       expect(sidebar).to have_categories_section
       expect(sidebar).to have_section_link(category.name)
       expect(sidebar).to have_section_link(category_subcategory2.name)
@@ -65,10 +73,21 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do
 
       expect(modal).to be_closed
 
+      sidebar.open_on_mobile if mobile
+
       expect(sidebar).to have_section_link(category.name)
       expect(sidebar).to have_no_section_link(category_subcategory2.name)
       expect(sidebar).to have_no_section_link(category2.name)
     end
+  end
+
+  describe "when on desktop" do
+    include_examples "a user can edit the sidebar categories navigation", false
+  end
+
+  describe "when on mobile" do
+    include_examples "a user can edit the sidebar categories navigation", true
+  end
 
   it "displays the categories in the modal based on the fixed position of the category when `fixed_category_positions` site setting is enabled" do
     SiteSetting.fixed_category_positions = true

spec/system/editing_sidebar_tags_navigation_spec.rb

@@ -28,9 +28,12 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
 
   before { sign_in(user) }
 
-  it "allows a user to edit the sidebar tags navigation" do
+  shared_examples "a user can edit the sidebar tags navigation" do |mobile|
+    it "allows a user to edit the sidebar tags navigation", mobile: mobile do
       visit "/latest"
 
+      sidebar.open_on_mobile if mobile
+
       expect(sidebar).to have_tags_section
       expect(sidebar).to have_section_link(tag1.name)
       expect(sidebar).to have_section_link(tag2.name)
@@ -46,6 +49,9 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
       modal.toggle_tag_checkbox(tag1).toggle_tag_checkbox(tag2).save
 
       expect(modal).to be_closed
+
+      sidebar.open_on_mobile if mobile
+
       expect(sidebar).to have_section_link(tag1.name)
       expect(sidebar).to have_section_link(tag2.name)
       expect(sidebar).to have_no_section_link(tag3.name)
@@ -53,6 +59,8 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
 
       visit "/latest"
 
+      sidebar.open_on_mobile if mobile
+
       expect(sidebar).to have_section_link(tag1.name)
       expect(sidebar).to have_section_link(tag2.name)
       expect(sidebar).to have_no_section_link(tag3.name)
@@ -63,11 +71,22 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
 
       expect(modal).to be_closed
 
+      sidebar.open_on_mobile if mobile
+
       expect(sidebar).to have_section_link(tag1.name)
       expect(sidebar).to have_no_section_link(tag2.name)
       expect(sidebar).to have_no_section_link(tag3.name)
       expect(sidebar).to have_no_section_link(tag4.name)
     end
+  end
+
+  describe "when on desktop" do
+    include_examples "a user can edit the sidebar tags navigation", false
+  end
+
+  describe "when on mobile" do
+    include_examples "a user can edit the sidebar tags navigation", true
+  end
 
   it "displays the all tags in the modal when `tags_listed_by_group` site setting is true" do
     SiteSetting.tags_listed_by_group = true

spec/system/page_objects/components/sidebar.rb

@@ -3,6 +3,10 @@
 module PageObjects
   module Components
     class Sidebar < PageObjects::Components::Base
+      def open_on_mobile
+        click_button("toggle-hamburger-menu")
+      end
+
       def visible?
         page.has_css?("#d-sidebar")
       end
@@ -69,10 +73,12 @@ module PageObjects
         find("#discourse-modal-title")
       end
 
-      SIDEBAR_WRAPPER_SELECTOR = ".sidebar-wrapper"
-
       def has_section?(name)
-        find(SIDEBAR_WRAPPER_SELECTOR).has_button?(name)
+        has_css?(".sidebar-sections [data-section-name='#{name.parameterize}']")
+      end
+
+      def has_no_section?(name)
+        has_no_css?(".sidebar-sections [data-section-name='#{name.parameterize}']")
       end
 
       def has_categories_section?
@@ -103,10 +109,6 @@ module PageObjects
         expect(tag_section_links.map(&:text)).to eq(tag_names)
       end
 
-      def has_no_section?(name)
-        find(SIDEBAR_WRAPPER_SELECTOR).has_no_button?(name)
-      end
-
       def primary_section_links(slug)
         all("[data-section-name='#{slug}'] .sidebar-section-link-wrapper").map(&:text)
       end