FEATURE: Add deslect all and reset to defaults btn edit nav menu modal (#22218)

What does this change do?

This change adds the deselect all and reset to defaults buttons to the
edit navigation menu tags modal. The deselect all button when
clicked deselects all the selected tags in the modal. If the user
saves with no tags selected, the user's tags section in the
navigation menu will be set to the site's top tags.

The reset to defaults button is only shown when the
`default_navigation_menu_tags` site setting has been configured.
When clicked, the user's tags section in the navigation menu is
automatically set to the tags defined by the
`default_navigation_menu_tags` site setting.
This commit is contained in:
Alan Guo Xiang Tan 2023-06-21 12:45:48 +08:00 committed by GitHub
parent 53d2e44e14
commit 547b520261
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 146 additions and 13 deletions

View File

@ -1,3 +1,16 @@
{{#in-element this.modalHeaderAfterTitleElement}}
<p class="sidebar-tags-form__deselect">
<DButton
@class="btn-flat sidebar-tags-form__deselect-all-btn"
@label="sidebar.tags_form_modal.subtitle.button_text"
@ariaLabel="sidebar.tags_form_modal.subtitle.button_text"
@action={{this.deselectAll}}
/>
{{i18n "sidebar.tags_form_modal.subtitle.text"}}
</p>
{{/in-element}}
<DModalBody
@title="sidebar.tags_form_modal.title"
@class="sidebar-tags-form-modal"
@ -54,11 +67,22 @@
</form>
</DModalBody>
<div class="modal-footer">
<div class="modal-footer sidebar-tags-form__modal-footer">
<DButton
@class="btn-primary sidebar-tags-form__save-button"
@label="save"
@disabled={{this.saving}}
@action={{this.save}}
/>
{{#if (gt this.siteSettings.default_navigation_menu_tags.length 0)}}
<DButton
@icon="undo"
@class="btn-flat btn-text sidebar-tags-form__reset-to-defaults-btn"
@label="sidebar.tags_form_modal.reset_to_defaults"
@disabled={{this.saving}}
@action={{this.resetToDefaults}}
/>
{{/if}}
</div>

View File

@ -9,6 +9,7 @@ import discourseDebounce from "discourse-common/lib/debounce";
export default class extends Component {
@service currentUser;
@service siteSettings;
@service store;
@tracked filter = "";
@ -52,6 +53,10 @@ export default class extends Component {
}
}
get modalHeaderAfterTitleElement() {
return document.getElementById("modal-header-after-title");
}
@action
onFilterInput(filter) {
discourseDebounce(this, this.#performFiltering, filter, INPUT_DELAY);
@ -61,6 +66,17 @@ export default class extends Component {
this.filter = filter.toLowerCase();
}
@action
deselectAll() {
this.selectedTags.clear();
}
@action
resetToDefaults() {
this.selectedTags =
this.siteSettings.default_navigation_menu_tags.split("|");
}
@action
toggleTag(tag) {
if (this.selectedTags.includes(tag)) {

View File

@ -60,3 +60,34 @@
}
}
}
.sidebar-tags-form__modal-footer.modal-footer {
.sidebar-tags-form__reset-to-defaults-btn {
margin-left: auto;
margin-right: 0em;
.d-icon {
font-size: var(--font-down-1);
color: var(--tertiary);
}
&:focus,
&:active {
background: none;
}
}
}
.sidebar-tags-form__deselect {
margin: 0;
.btn-flat.sidebar-tags-form__deselect-all-btn {
margin-left: auto;
padding: 0;
&:focus,
&:active {
background: none;
}
}
}

View File

@ -4401,6 +4401,10 @@ en:
title: "Edit tags navigation"
filter_placeholder: "Filter tags"
no_tags: "There are no tags matching the given term."
subtitle:
button_text: "Deselect all"
text: "and we'll automatically show this site's top tags"
reset_to_defaults: "Reset to defaults"
sections:
custom:

View File

@ -3,9 +3,18 @@
RSpec.describe "Editing sidebar tags navigation", type: :system do
fab!(:user) { Fabricate(:user) }
fab!(:group) { Fabricate(:group).tap { |g| g.add(user) } }
fab!(:tag) { Fabricate(:tag, name: "tag", public_topic_count: 1, staff_topic_count: 1) }
fab!(:tag2) { Fabricate(:tag, name: "tag2", public_topic_count: 2, staff_topic_count: 2) }
fab!(:tag3) { Fabricate(:tag, name: "tag3", public_topic_count: 3, staff_topic_count: 3) }
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]) }
end
fab!(:tag3) do
Fabricate(:tag, name: "tag3").tap { |tag| Fabricate.times(1, :topic, tags: [tag]) }
end
# This tag should not be displayed in the modal as it has not been used in a topic
fab!(:tag4) { Fabricate(:tag, name: "tag4") }
let(:sidebar) { PageObjects::Components::Sidebar.new }
@ -18,25 +27,25 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
visit "/latest"
expect(sidebar).to have_tags_section
expect(sidebar).to have_no_section_link(tag.name)
expect(sidebar).to have_no_section_link(tag2.name)
expect(sidebar).to have_no_section_link(tag3.name)
expect(sidebar).to have_section_link(tag1.name)
expect(sidebar).to have_section_link(tag2.name)
expect(sidebar).to have_section_link(tag3.name)
modal = sidebar.click_edit_tags_button
expect(modal).to have_right_title(I18n.t("js.sidebar.tags_form_modal.title"))
expect(modal).to have_tag_checkboxes([tag, tag2, tag3])
expect(modal).to have_tag_checkboxes([tag1, tag2, tag3])
modal.toggle_tag_checkbox(tag).toggle_tag_checkbox(tag2).save
modal.toggle_tag_checkbox(tag1).toggle_tag_checkbox(tag2).save
expect(modal).to be_closed
expect(sidebar).to have_section_link(tag.name)
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)
visit "/latest"
expect(sidebar).to have_section_link(tag.name)
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)
@ -45,7 +54,7 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
expect(modal).to be_closed
expect(sidebar).to have_section_link(tag.name)
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)
end
@ -59,7 +68,7 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
modal.filter("tag")
expect(modal).to have_tag_checkboxes([tag, tag2, tag3])
expect(modal).to have_tag_checkboxes([tag1, tag2, tag3])
modal.filter("tag2")
@ -69,4 +78,43 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do
expect(modal).to have_no_tag_checkboxes
end
it "allows a user to deselect all tags in the modal which will display the site's top tags" do
Fabricate(:tag_sidebar_section_link, user: user, linkable: tag1)
visit "/latest"
expect(sidebar).to have_tags_section
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)
modal = sidebar.click_edit_tags_button
modal.deselect_all.save
expect(sidebar).to have_section_link(tag1.name)
expect(sidebar).to have_section_link(tag2.name)
expect(sidebar).to have_section_link(tag3.name)
end
it "allows a user to reset to the default navigation menu tags site setting" do
Fabricate(:tag_sidebar_section_link, user: user, linkable: tag1)
SiteSetting.default_navigation_menu_tags = "#{tag2.name}|#{tag3.name}"
visit "/latest"
expect(sidebar).to have_tags_section
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)
modal = sidebar.click_edit_tags_button
modal.click_reset_to_defaults_button.save
expect(modal).to be_closed
expect(sidebar).to have_no_section_link(tag1.name)
expect(sidebar).to have_section_link(tag2.name)
expect(sidebar).to have_section_link(tag3.name)
end
end

View File

@ -45,6 +45,16 @@ module PageObjects
find(".sidebar-tags-form-modal .sidebar-tags-form__filter-input-field").fill_in(with: text)
self
end
def deselect_all
click_button(I18n.t("js.sidebar.tags_form_modal.subtitle.button_text"))
self
end
def click_reset_to_defaults_button
click_button(I18n.t("js.sidebar.tags_form_modal.reset_to_defaults"))
self
end
end
end
end