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.

app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs

@@ -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>

app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.js

@@ -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)) {

app/assets/stylesheets/common/components/sidebar-tags-form.scss

@@ -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;
+    }
+  }
+}

config/locales/client.en.yml

@@ -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:

spec/system/editing_sidebar_tags_navigation_spec.rb

@@ -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

spec/system/page_objects/modals/sidebar_edit_tags.rb

@@ -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