From 289d2a5540fcd4cb347820e9933743a6e65a718e Mon Sep 17 00:00:00 2001
From: Alan Guo Xiang Tan <gxtan1990@gmail.com>
Date: Tue, 20 Jun 2023 08:17:53 +0800
Subject: [PATCH] DEV: Deselect all and reset to defaults btns to edit
 categories modal (#22143)

What does this change do?

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

The reset to defaults button is only shown when the
`default_navigation_menu_categories` site setting has been configured.
When clicked, the user's categories section in the navigation menu is
automatically set to the categories defined by the
`default_navigation_menu_categories` site setting.
---
 .../discourse/app/components/d-modal.hbs      |  20 ++-
 .../sidebar/categories-form-modal.hbs         | 165 ++++++++++--------
 .../sidebar/categories-form-modal.js          |  20 ++-
 app/assets/stylesheets/common/base/modal.scss |   2 +-
 .../components/sidebar-categories-form.scss   |  32 +++-
 config/locales/client.en.yml                  |   6 +-
 ...ting_sidebar_categories_navigation_spec.rb |  47 ++++-
 .../modals/sidebar_edit_categories.rb         |  16 +-
 8 files changed, 223 insertions(+), 85 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/components/d-modal.hbs b/app/assets/javascripts/discourse/app/components/d-modal.hbs
index 5d9d1ce0077..fcb28cf6b2a 100644
--- a/app/assets/javascripts/discourse/app/components/d-modal.hbs
+++ b/app/assets/javascripts/discourse/app/components/d-modal.hbs
@@ -34,15 +34,19 @@
             />
           {{/if}}
 
-          {{#if this.title}}
-            <div class="title">
-              <h3 id="discourse-modal-title">{{this.title}}</h3>
+          <div class="modal-title-wrapper">
+            {{#if this.title}}
+              <div class="title">
+                <h3 id="discourse-modal-title">{{this.title}}</h3>
 
-              {{#if this.subtitle}}
-                <p class="subtitle">{{this.subtitle}}</p>
-              {{/if}}
-            </div>
-          {{/if}}
+                {{#if this.subtitle}}
+                  <p class="subtitle">{{this.subtitle}}</p>
+                {{/if}}
+              </div>
+            {{/if}}
+
+            <span id="modal-header-after-title"></span>
+          </div>
 
           {{#if this.panels}}
             <ul class="modal-tabs">
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.hbs b/app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.hbs
index a1052778657..988eab9b7e1 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.hbs
+++ b/app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.hbs
@@ -1,75 +1,102 @@
-<DModalBody
-  @title="sidebar.categories_form.title"
-  @class="sidebar-categories-form-modal"
->
-  <form class="sidebar-categories-form">
-    <div class="sidebar-categories-form__filter">
-      {{d-icon "search" class="sidebar-categories-form__filter-input-icon"}}
+{{#in-element this.modalHeaderAfterTitleElement}}
+  <p class="sidebar-categories-form__deselect">
+    <DButton
+      @class="btn-flat sidebar-categories-form__deselect-all-btn"
+      @label="sidebar.categories_form_modal.subtitle.button_text"
+      @ariaLabel="sidebar.categories_form_modal.subtitle.button_text"
+      @action={{this.deselectAll}}
+    />
 
-      <Input
-        class="sidebar-categories-form__filter-input-field"
-        placeholder={{i18n "sidebar.categories_form.filter_placeholder"}}
-        @type="text"
-        @value={{this.filter}}
-        {{on "input" (action "onFilterInput" value="target.value")}}
-      />
-    </div>
+    {{i18n "sidebar.categories_form_modal.subtitle.text"}}
+  </p>
+{{/in-element}}
 
-    {{#if (gt this.filteredCategoriesGroupings.length 0)}}
-      {{#each this.filteredCategoriesGroupings as |categories|}}
-        <div
-          class="sidebar-categories-form__row"
-          style={{html-safe (border-color categories.0.color "left")}}
-        >
+<div class="sidebar-categories-form-modal">
+  <DModalBody
+    @title="sidebar.categories_form_modal.title"
+    @class="sidebar-categories-form__modal-body"
+  >
+    <form class="sidebar-categories-form">
+      <div class="sidebar-categories-form__filter">
+        {{d-icon "search" class="sidebar-categories-form__filter-input-icon"}}
 
-          {{#each categories as |category|}}
-            <div
-              class="sidebar-categories-form__category-row"
-              data-category-id={{category.id}}
-              data-category-level={{category.level}}
-            >
-              <label
-                class="sidebar-categories-form__category-label"
-                for={{concat "sidebar-categories-form__input--" category.id}}
-              >
-                <div class="sidebar-categories-form__category-badge">
-                  {{category-badge category}}
-                </div>
-
-                {{#unless category.parentCategory}}
-                  <div class="sidebar-categories-form__category-description">
-                    {{dir-span category.description_excerpt htmlSafe="true"}}
-                  </div>
-                {{/unless}}
-              </label>
-
-              <Input
-                id={{concat "sidebar-categories-form__input--" category.id}}
-                class="sidebar-categories-form__input"
-                @type="checkbox"
-                @checked={{includes
-                  this.selectedSidebarCategoryIds
-                  category.id
-                }}
-                {{on "click" (action "toggleCategory" category.id)}}
-              />
-            </div>
-          {{/each}}
-        </div>
-      {{/each}}
-    {{else}}
-      <div class="sidebar-categories-form__no-categories">
-        {{i18n "sidebar.categories_form.no_categories"}}
+        <Input
+          class="sidebar-categories-form__filter-input-field"
+          placeholder={{i18n
+            "sidebar.categories_form_modal.filter_placeholder"
+          }}
+          @type="text"
+          @value={{this.filter}}
+          {{on "input" (action "onFilterInput" value="target.value")}}
+        />
       </div>
-    {{/if}}
-  </form>
-</DModalBody>
 
-<div class="modal-footer">
-  <DButton
-    @class="btn-primary sidebar-categories-form__save-button"
-    @label="sidebar.categories_form.save"
-    @disabled={{this.saving}}
-    @action={{this.save}}
-  />
+      {{#if (gt this.filteredCategoriesGroupings.length 0)}}
+        {{#each this.filteredCategoriesGroupings as |categories|}}
+          <div
+            class="sidebar-categories-form__row"
+            style={{html-safe (border-color categories.0.color "left")}}
+          >
+
+            {{#each categories as |category|}}
+              <div
+                class="sidebar-categories-form__category-row"
+                data-category-id={{category.id}}
+                data-category-level={{category.level}}
+              >
+                <label
+                  class="sidebar-categories-form__category-label"
+                  for={{concat "sidebar-categories-form__input--" category.id}}
+                >
+                  <div class="sidebar-categories-form__category-badge">
+                    {{category-badge category}}
+                  </div>
+
+                  {{#unless category.parentCategory}}
+                    <div class="sidebar-categories-form__category-description">
+                      {{dir-span category.description_excerpt htmlSafe="true"}}
+                    </div>
+                  {{/unless}}
+                </label>
+
+                <Input
+                  id={{concat "sidebar-categories-form__input--" category.id}}
+                  class="sidebar-categories-form__input"
+                  @type="checkbox"
+                  @checked={{includes
+                    this.selectedSidebarCategoryIds
+                    category.id
+                  }}
+                  {{on "click" (action "toggleCategory" category.id)}}
+                />
+              </div>
+            {{/each}}
+          </div>
+        {{/each}}
+      {{else}}
+        <div class="sidebar-categories-form__no-categories">
+          {{i18n "sidebar.categories_form_modal.no_categories"}}
+        </div>
+      {{/if}}
+    </form>
+  </DModalBody>
+
+  <div class="modal-footer sidebar-categories-form__modal-footer">
+    <DButton
+      @class="btn-primary sidebar-categories-form__save-button"
+      @label="sidebar.categories_form_modal.save"
+      @disabled={{this.saving}}
+      @action={{this.save}}
+    />
+
+    {{#if (gt this.siteSettings.default_navigation_menu_categories.length 0)}}
+      <DButton
+        @icon="undo"
+        @class="btn-flat btn-text sidebar-categories-form__reset-to-defaults-btn"
+        @label="sidebar.categories_form_modal.reset_to_defaults"
+        @disabled={{this.saving}}
+        @action={{this.resetToDefaults}}
+      />
+    {{/if}}
+  </div>
 </div>
\ No newline at end of file
diff --git a/app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.js b/app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.js
index f0ccc8308ea..3d41dcc2054 100644
--- a/app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.js
+++ b/app/assets/javascripts/discourse/app/components/sidebar/categories-form-modal.js
@@ -8,8 +8,9 @@ import discourseDebounce from "discourse-common/lib/debounce";
 import { popupAjaxError } from "discourse/lib/ajax-error";
 
 export default class extends Component {
-  @service site;
   @service currentUser;
+  @service site;
+  @service siteSettings;
 
   @tracked filter = "";
 
@@ -85,6 +86,11 @@ export default class extends Component {
     this.filter = filter.toLowerCase();
   }
 
+  @action
+  deselectAll() {
+    this.selectedSidebarCategoryIds.clear();
+  }
+
   @action
   toggleCategory(categoryId) {
     if (this.selectedSidebarCategoryIds.includes(categoryId)) {
@@ -94,6 +100,18 @@ export default class extends Component {
     }
   }
 
+  get modalHeaderAfterTitleElement() {
+    return document.getElementById("modal-header-after-title");
+  }
+
+  @action
+  resetToDefaults() {
+    this.selectedSidebarCategoryIds =
+      this.siteSettings.default_navigation_menu_categories
+        .split("|")
+        .map((id) => parseInt(id, 10));
+  }
+
   @action
   save() {
     this.saving = true;
diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss
index 8b8f8fa4e44..b9fe680a575 100644
--- a/app/assets/stylesheets/common/base/modal.scss
+++ b/app/assets/stylesheets/common/base/modal.scss
@@ -134,7 +134,7 @@
   }
 
   &:not(.history-modal) {
-    .modal-body:not(.reorder-categories):not(.poll-ui-builder):not(.poll-breakdown):not(.sidebar-categories-form-modal) {
+    .modal-body:not(.reorder-categories):not(.poll-ui-builder):not(.poll-breakdown):not(.sidebar-categories-form__modal-body) {
       max-height: 80vh !important;
       @media screen and (max-height: 500px) {
         max-height: 65vh !important;
diff --git a/app/assets/stylesheets/common/components/sidebar-categories-form.scss b/app/assets/stylesheets/common/components/sidebar-categories-form.scss
index c2b3c7602bb..3f5aa358c7d 100644
--- a/app/assets/stylesheets/common/components/sidebar-categories-form.scss
+++ b/app/assets/stylesheets/common/components/sidebar-categories-form.scss
@@ -4,13 +4,43 @@
   }
 }
 
+.sidebar-categories-form__modal-footer.modal-footer {
+  .sidebar-categories-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-categories-form__deselect {
+  margin: 0;
+
+  .btn-flat.sidebar-categories-form__deselect-all-btn {
+    margin-left: auto;
+    padding: 0;
+
+    &:focus,
+    &:active {
+      background: none;
+    }
+  }
+}
+
 .sidebar-categories-form {
   .sidebar-categories-form__filter {
     display: flex;
     flex-direction: row;
     margin-right: auto;
     width: 100%;
-    margin-bottom: 1em;
     position: relative;
   }
 
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index aa9f92abd10..40dbc4cab12 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -4389,11 +4389,15 @@ en:
       more: "More"
       all_categories: "All categories"
       all_tags: "All tags"
-      categories_form:
+      categories_form_modal:
         save: "Save"
         title: "Edit categories navigation"
+        subtitle:
+          button_text: "Deselect all"
+          text: "and we'll automatically show this site's most popular categories"
         filter_placeholder: "Filter categories"
         no_categories: "There are no categories matching the given term."
+        reset_to_defaults: "Reset to defaults"
 
       sections:
         custom:
diff --git a/spec/system/editing_sidebar_categories_navigation_spec.rb b/spec/system/editing_sidebar_categories_navigation_spec.rb
index 4b527a28566..e83d7c72d0e 100644
--- a/spec/system/editing_sidebar_categories_navigation_spec.rb
+++ b/spec/system/editing_sidebar_categories_navigation_spec.rb
@@ -22,7 +22,6 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do
 
   before do
     SiteSetting.new_edit_sidebar_categories_tags_interface_groups = group.name
-    SiteSetting.default_navigation_menu_categories = "#{category.id}|#{category2.id}"
     sign_in(user)
   end
 
@@ -33,11 +32,12 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do
 
     modal = sidebar.click_edit_categories_button
 
-    expect(modal).to have_right_title(I18n.t("js.sidebar.categories_form.title"))
+    expect(modal).to have_right_title(I18n.t("js.sidebar.categories_form_modal.title"))
     expect(modal).to have_parent_category_color(category)
     expect(modal).to have_category_description_excerpt(category)
     expect(modal).to have_parent_category_color(category2)
     expect(modal).to have_category_description_excerpt(category2)
+    expect(modal).to have_no_reset_to_defaults_button
 
     expect(modal).to have_categories(
       [category, category_subcategory, category_subcategory2, category2, category2_subcategory],
@@ -71,6 +71,47 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do
     expect(sidebar).to have_no_section_link(category2.name)
   end
 
+  it "allows a user to deselect all categories in the modal" do
+    Fabricate(:category_sidebar_section_link, linkable: category, user: user)
+    Fabricate(:category_sidebar_section_link, linkable: category_subcategory2, user: user)
+
+    visit "/latest"
+
+    expect(sidebar).to have_categories_section
+
+    modal = sidebar.click_edit_categories_button
+    modal.deselect_all.save
+
+    expect(sidebar).to have_section_link(category.name)
+    expect(sidebar).to have_no_section_link(category_subcategory2.name)
+    expect(sidebar).to have_section_link(category2.name)
+    expect(sidebar).to have_section_link("Uncategorized")
+  end
+
+  it "allows a user to reset to the default navigation menu categories site setting" do
+    Fabricate(:category_sidebar_section_link, linkable: category, user: user)
+    Fabricate(:category_sidebar_section_link, linkable: category2, user: user)
+
+    SiteSetting.default_navigation_menu_categories =
+      "#{category_subcategory2.id}|#{category2_subcategory.id}"
+
+    visit "/latest"
+
+    expect(sidebar).to have_categories_section
+    expect(sidebar).to have_section_link(category.name)
+    expect(sidebar).to have_section_link(category2.name)
+
+    modal = sidebar.click_edit_categories_button
+    modal.click_reset_to_defaults_button.save
+
+    expect(modal).to be_closed
+
+    expect(sidebar).to have_no_section_link(category.name)
+    expect(sidebar).to have_no_section_link(category2.name)
+    expect(sidebar).to have_section_link(category_subcategory2.name)
+    expect(sidebar).to have_section_link(category2_subcategory.name)
+  end
+
   it "allows a user to filter the categories in the modal by the category's name" do
     visit "/latest"
 
@@ -127,7 +168,7 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do
 
       modal = sidebar.click_edit_categories_button
 
-      expect(modal).to have_right_title(I18n.t("js.sidebar.categories_form.title"))
+      expect(modal).to have_right_title(I18n.t("js.sidebar.categories_form_modal.title"))
 
       modal
         .toggle_category_checkbox(category_subcategory_subcategory)
diff --git a/spec/system/page_objects/modals/sidebar_edit_categories.rb b/spec/system/page_objects/modals/sidebar_edit_categories.rb
index 686a6e42559..bc8a3eba38f 100644
--- a/spec/system/page_objects/modals/sidebar_edit_categories.rb
+++ b/spec/system/page_objects/modals/sidebar_edit_categories.rb
@@ -29,7 +29,7 @@ module PageObjects
         has_no_css?(".sidebar-categories-form-modal .sidebar-categories-form__category-row") &&
           has_css?(
             ".sidebar-categories-form-modal .sidebar-categories-form__no-categories",
-            text: I18n.t("js.sidebar.categories_form.no_categories"),
+            text: I18n.t("js.sidebar.categories_form_modal.no_categories"),
           )
       end
 
@@ -65,6 +65,20 @@ module PageObjects
 
         self
       end
+
+      def deselect_all
+        click_button(I18n.t("js.sidebar.categories_form_modal.subtitle.button_text"))
+        self
+      end
+
+      def click_reset_to_defaults_button
+        click_button(I18n.t("js.sidebar.categories_form_modal.reset_to_defaults"))
+        self
+      end
+
+      def has_no_reset_to_defaults_button?
+        has_no_button?(I18n.t("js.sidebar.categories_form_modal.reset_to_defaults"))
+      end
     end
   end
 end