diff --git a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.js b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.js index ce7c0c6ac53..6fcb55341f5 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/edit-navigation-menu/tags-modal.js @@ -61,6 +61,11 @@ export default class extends Component { if (this.observer) { this.observer.disconnect(); } else { + const root = document.querySelector(".modal-body"); + const style = window.getComputedStyle(root); + const marginTop = parseFloat(style.marginTop); + const paddingTop = parseFloat(style.paddingTop); + this.observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { @@ -71,6 +76,7 @@ export default class extends Component { }, { root: document.querySelector(".modal-body"), + rootMargin: `0px 0px ${marginTop + paddingTop}px 0px`, threshold: 1.0, } ); diff --git a/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/tags-modal.scss b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/tags-modal.scss index 71dacd39925..2941abf967c 100644 --- a/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/tags-modal.scss +++ b/app/assets/stylesheets/common/components/sidebar/edit-navigation-menu/tags-modal.scss @@ -1,4 +1,5 @@ .sidebar-tags-form { + height: 100%; display: grid; gap: 0 0.5em; margin: 0; diff --git a/spec/system/editing_sidebar_tags_navigation_spec.rb b/spec/system/editing_sidebar_tags_navigation_spec.rb index fa9af551800..1c7fa93fe06 100644 --- a/spec/system/editing_sidebar_tags_navigation_spec.rb +++ b/spec/system/editing_sidebar_tags_navigation_spec.rb @@ -5,15 +5,15 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do fab!(:tag1) { Fabricate(:tag, name: "tag").tap { |tag| Fabricate.times(3, :topic, tags: [tag]) } } fab!(:tag2) do - Fabricate(:tag, name: "tag2").tap { |tag| Fabricate.times(2, :topic, tags: [tag]) } + Fabricate(:tag, name: "tag 2").tap { |tag| Fabricate.times(2, :topic, tags: [tag]) } end fab!(:tag3) do - Fabricate(:tag, name: "tag3").tap { |tag| Fabricate.times(1, :topic, tags: [tag]) } + Fabricate(:tag, name: "tag 3").tap { |tag| Fabricate.times(1, :topic, tags: [tag]) } end fab!(:tag4) do - Fabricate(:tag, name: "tag4").tap do |tag| + Fabricate(:tag, name: "tag 4").tap do |tag| Fabricate.times(1, :topic, tags: [tag]) # Ensures tags in tag groups are shown as well @@ -21,9 +21,6 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do end end - # This tag should not be displayed in the modal as it has not been used in a topic - fab!(:tag5) { Fabricate(:tag, name: "tag5") } - let(:sidebar) { PageObjects::Components::NavigationMenu::Sidebar.new } before { sign_in(user) } @@ -99,7 +96,7 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do expect(modal).to have_tag_checkboxes([tag1, tag2, tag3, tag4]) - modal.filter("tag2") + modal.filter("tag 2") expect(modal).to have_tag_checkboxes([tag2]) @@ -164,7 +161,7 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do expect(modal).to have_tag_checkboxes([tag1, tag2]) - modal.filter("tag2") + modal.filter("tag 2") expect(modal).to have_tag_checkboxes([tag2]) @@ -178,14 +175,25 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do end it "loads more tags when the user scrolls views the last tag in the modal and there is more tags to load" do - stub_const(TagsController, "LIST_LIMIT", 2) do - visit "/latest" + Tag.delete_all - expect(sidebar).to have_tags_section + tags = + (TagsController::LIST_LIMIT + 1).times.map.with_index do |index| + Fabricate(:tag, name: "Tag #{sprintf("%03d", index)}") + end - modal = sidebar.click_edit_tags_button + visit "/latest" - expect(modal).to have_tag_checkboxes([tag1, tag2, tag3, tag4]) - end + expect(sidebar).to have_tags_section + + modal = sidebar.click_edit_tags_button + + first_page_tags = tags.first(TagsController::LIST_LIMIT) + + expect(modal).to have_tag_checkboxes(first_page_tags) + + modal.scroll_to_tag(first_page_tags.last) + + expect(modal).to have_tag_checkboxes(tags) end end diff --git a/spec/system/page_objects/modals/sidebar_edit_tags.rb b/spec/system/page_objects/modals/sidebar_edit_tags.rb index e99f13844c7..2acbf71cd4e 100644 --- a/spec/system/page_objects/modals/sidebar_edit_tags.rb +++ b/spec/system/page_objects/modals/sidebar_edit_tags.rb @@ -6,8 +6,9 @@ module PageObjects module Modals class SidebarEditTags < SidebarEditNavigationModal def has_tag_checkboxes?(tags) - find(".sidebar-tags-form").has_content?( + expect(form).to have_content( tags.map { |tag| "#{tag.name} (#{tag.public_topic_count})" }.join("\n"), + exact: true, ) end @@ -26,6 +27,18 @@ module PageObjects self end + + def scroll_to_tag(tag) + page.execute_script( + "document.querySelector('.sidebar-tags-form__tag[data-tag-name=\"#{tag.name}\"]').scrollIntoView()", + ) + end + + private + + def form + find(".sidebar-tags-form") + end end end end