From 853bce2abc9e2c0f0fb37cf80461e3267da6e64c Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Thu, 8 Jun 2023 13:54:51 +0900 Subject: [PATCH] UX: Allow users to filter categories in edit sidebar categories modal (#21996) What does this change do? This change is a continuation of 2191b879c693f898bf7602b4f9ab6780b1eead67 and adds an input filter to the edit sidebar categories modal which the user can use to filter through the list of categories by the category's name. Note that if a child category is being shown, all of its ancestors will be shown even if the names of the ancestors do not match the given filter. This is to ensure that we continue to display the hierarchy of a child category even if the parent category does not match the filter. --- .../sidebar/categories-form-modal.hbs | 87 ++++++++++------- .../sidebar/categories-form-modal.js | 47 +++++++++ app/assets/stylesheets/common/base/modal.scss | 2 +- .../components/sidebar-categories-form.scss | 37 ++++++- .../desktop/components/_index.scss | 1 + .../components/sidebar-categories-form.scss | 5 + .../stylesheets/mobile/components/_index.scss | 1 + .../components/sidebar-categories-form.scss | 5 + config/locales/client.en.yml | 4 +- ...ting_sidebar_categories_navigation_spec.rb | 97 ++++++++++++++++--- .../modals/sidebar_edit_categories.rb | 53 ++++++++-- 11 files changed, 281 insertions(+), 58 deletions(-) create mode 100644 app/assets/stylesheets/desktop/components/sidebar-categories-form.scss create mode 100644 app/assets/stylesheets/mobile/components/sidebar-categories-form.scss 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 8a158491509..a1052778657 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 @@ -3,44 +3,65 @@ @class="sidebar-categories-form-modal" >
- {{#each this.categoryGroupings as |categories|}} -
+
+ {{d-icon "search" class="sidebar-categories-form__filter-input-icon"}} - {{#each categories as |category|}} -
-
+ + {{#if (gt this.filteredCategoriesGroupings.length 0)}} + {{#each this.filteredCategoriesGroupings as |categories|}} +
+ + {{#each categories as |category|}} +
-
- {{category-badge category}} -
- - {{#unless category.parentCategory}} -
- {{dir-span category.description_excerpt htmlSafe="true"}} + - -
- {{/each}} + {{#unless category.parentCategory}} +
+ {{dir-span category.description_excerpt htmlSafe="true"}} +
+ {{/unless}} + + + +
+ {{/each}} +
+ {{/each}} + {{else}} +
+ {{i18n "sidebar.categories_form.no_categories"}}
- {{/each}} + {{/if}} 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 b846be7bd75..f0ccc8308ea 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 @@ -3,12 +3,16 @@ import { inject as service } from "@ember/service"; import Component from "@glimmer/component"; import { tracked } from "@glimmer/tracking"; +import { INPUT_DELAY } from "discourse-common/config/environment"; +import discourseDebounce from "discourse-common/lib/debounce"; import { popupAjaxError } from "discourse/lib/ajax-error"; export default class extends Component { @service site; @service currentUser; + @tracked filter = ""; + @tracked selectedSidebarCategoryIds = [ ...this.currentUser.sidebar_category_ids, ]; @@ -38,6 +42,49 @@ export default class extends Component { ); } + get filteredCategoriesGroupings() { + if (this.filter.length === 0) { + return this.categoryGroupings; + } else { + return this.categoryGroupings.reduce((acc, categoryGrouping) => { + const filteredCategories = new Set(); + + categoryGrouping.forEach((category) => { + if (this.#matchesFilter(category, this.filter)) { + if (category.parentCategory?.parentCategory) { + filteredCategories.add(category.parentCategory.parentCategory); + } + + if (category.parentCategory) { + filteredCategories.add(category.parentCategory); + } + + filteredCategories.add(category); + } + }); + + if (filteredCategories.size > 0) { + acc.push(Array.from(filteredCategories)); + } + + return acc; + }, []); + } + } + + #matchesFilter(category, filter) { + return category.nameLower.includes(filter); + } + + @action + onFilterInput(filter) { + discourseDebounce(this, this.#performFiltering, filter, INPUT_DELAY); + } + + #performFiltering(filter) { + this.filter = filter.toLowerCase(); + } + @action toggleCategory(categoryId) { if (this.selectedSidebarCategoryIds.includes(categoryId)) { diff --git a/app/assets/stylesheets/common/base/modal.scss b/app/assets/stylesheets/common/base/modal.scss index db755045300..eaede938839 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) { + .modal-body:not(.reorder-categories):not(.poll-ui-builder):not(.poll-breakdown):not(.sidebar-categories-form-modal) { 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 db31e1f49a6..c2b3c7602bb 100644 --- a/app/assets/stylesheets/common/components/sidebar-categories-form.scss +++ b/app/assets/stylesheets/common/components/sidebar-categories-form.scss @@ -1,4 +1,39 @@ +.sidebar-categories-form-modal { + .modal-body { + min-height: 50vh; + } +} + .sidebar-categories-form { + .sidebar-categories-form__filter { + display: flex; + flex-direction: row; + margin-right: auto; + width: 100%; + margin-bottom: 1em; + position: relative; + } + + .sidebar-categories-form__filter-input-icon { + position: absolute; + left: 0.5em; + top: 0.65em; + color: var(--primary-low-mid); + } + + .sidebar-categories-form__filter-input-field { + border-color: var(--primary-low-mid); + padding-left: 1.75em; + width: 100%; + + &:focus { + border-color: var(--tertiary); + outline: none; + outline-offset: 0; + box-shadow: inset 0px 0px 0px 1px var(--tertiary); + } + } + .sidebar-categories-form__row { display: flex; flex-direction: column; @@ -21,7 +56,7 @@ padding: 0.5em 0; } - .sidebar-categories-form__category-row[data-category-level="0"] { + .sidebar-categories-form__category-row[data-category-level="0"]:not(:only-child) { border-bottom: 1px solid var(--primary-low); } diff --git a/app/assets/stylesheets/desktop/components/_index.scss b/app/assets/stylesheets/desktop/components/_index.scss index 3ae19fc49c3..02189ecc35e 100644 --- a/app/assets/stylesheets/desktop/components/_index.scss +++ b/app/assets/stylesheets/desktop/components/_index.scss @@ -1,3 +1,4 @@ +@import "sidebar-categories-form"; @import "user-card"; @import "user-info"; @import "user-stream-item"; diff --git a/app/assets/stylesheets/desktop/components/sidebar-categories-form.scss b/app/assets/stylesheets/desktop/components/sidebar-categories-form.scss new file mode 100644 index 00000000000..443c1798d1f --- /dev/null +++ b/app/assets/stylesheets/desktop/components/sidebar-categories-form.scss @@ -0,0 +1,5 @@ +.sidebar-categories-form-modal { + .modal-inner-container { + min-width: var(--modal-max-width); + } +} diff --git a/app/assets/stylesheets/mobile/components/_index.scss b/app/assets/stylesheets/mobile/components/_index.scss index 89eb683655c..1df01e0a16b 100644 --- a/app/assets/stylesheets/mobile/components/_index.scss +++ b/app/assets/stylesheets/mobile/components/_index.scss @@ -1,3 +1,4 @@ +@import "sidebar-categories-form"; @import "topic-footer-mobile-dropdown"; @import "user-card"; @import "user-stream-item"; diff --git a/app/assets/stylesheets/mobile/components/sidebar-categories-form.scss b/app/assets/stylesheets/mobile/components/sidebar-categories-form.scss new file mode 100644 index 00000000000..9d99234562a --- /dev/null +++ b/app/assets/stylesheets/mobile/components/sidebar-categories-form.scss @@ -0,0 +1,5 @@ +.sidebar-categories-form-modal { + .modal-inner-container { + width: 35em; + } +} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 890a67dc91d..9761ad9c398 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -4425,8 +4425,8 @@ en: categories_form: save: "Save" title: "Edit categories navigation" - filter_input: - placeholder: "Filter categories" + filter_placeholder: "Filter categories" + no_categories: "There are no categories matching the given term." sections: custom: diff --git a/spec/system/editing_sidebar_categories_navigation_spec.rb b/spec/system/editing_sidebar_categories_navigation_spec.rb index fe1a74c896a..a94379183c0 100644 --- a/spec/system/editing_sidebar_categories_navigation_spec.rb +++ b/spec/system/editing_sidebar_categories_navigation_spec.rb @@ -3,11 +3,20 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do fab!(:user) { Fabricate(:user) } fab!(:group) { Fabricate(:group).tap { |g| g.add(user) } } - fab!(:category) { Fabricate(:category) } - fab!(:category_subcategory) { Fabricate(:category, parent_category_id: category.id) } - fab!(:category_subcategory2) { Fabricate(:category, parent_category_id: category.id) } - fab!(:category2) { Fabricate(:category) } - fab!(:category2_subcategory) { Fabricate(:category, parent_category_id: category2.id) } + fab!(:category) { Fabricate(:category, name: "category") } + fab!(:category_subcategory) do + Fabricate(:category, parent_category_id: category.id, name: "category subcategory") + end + + fab!(:category_subcategory2) do + Fabricate(:category, parent_category_id: category.id, name: "category subcategory 2") + end + + fab!(:category2) { Fabricate(:category, name: "category2") } + + fab!(:category2_subcategory) do + Fabricate(:category, parent_category_id: category2.id, name: "category2 subcategory") + end let(:sidebar) { PageObjects::Components::Sidebar.new } @@ -25,6 +34,14 @@ 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_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_categories( + [category, category_subcategory, category_subcategory2, category2, category2_subcategory], + ) modal .toggle_category_checkbox(category) @@ -54,19 +71,56 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do expect(sidebar).to have_no_section_link(category2.name) end + it "allows a user to filter the categories in the modal by the category's name" do + visit "/latest" + + expect(sidebar).to have_categories_section + + modal = sidebar.click_edit_categories_button + + modal.filter("category subcategory 2") + + expect(modal).to have_categories([category, category_subcategory2]) + + modal.filter("2") + + expect(modal).to have_categories( + [category, category_subcategory2, category2, category2_subcategory], + ) + + modal.filter("someinvalidterm") + + expect(modal).to have_no_categories + end + describe "when max_category_nesting has been set to 3" do - before { SiteSetting.max_category_nesting = 3 } + before_all { SiteSetting.max_category_nesting = 3 } + + fab!(:category_subcategory_subcategory) do + Fabricate( + :category, + parent_category_id: category_subcategory.id, + name: "category subcategory subcategory", + ) + end + + fab!(:category_subcategory_subcategory2) do + Fabricate( + :category, + parent_category_id: category_subcategory.id, + name: "category subcategory subcategory 2", + ) + end + + fab!(:category2_subcategory_subcategory) do + Fabricate( + :category, + parent_category_id: category2_subcategory.id, + name: "category2 subcategory subcategory", + ) + end it "allows a user to edit sub-subcategories to be included in the sidebar categories section" do - category_subcategory_subcategory = - Fabricate(:category, parent_category_id: category_subcategory.id) - - category_subcategory_subcategory2 = - Fabricate(:category, parent_category_id: category_subcategory.id) - - category2_subcategory_subcategory = - Fabricate(:category, parent_category_id: category2_subcategory.id) - visit "/latest" expect(sidebar).to have_categories_section @@ -87,5 +141,18 @@ RSpec.describe "Editing sidebar categories navigation", type: :system do expect(sidebar).to have_section_link(category_subcategory_subcategory2.name) expect(sidebar).to have_section_link(category2_subcategory_subcategory.name) end + + it "allows a user to filter the categories in the modal by the category's name" do + visit "/latest" + + expect(sidebar).to have_categories_section + + modal = sidebar.click_edit_categories_button + modal.filter("category2 subcategory subcategory") + + expect(modal).to have_categories( + [category2, category2_subcategory, category2_subcategory_subcategory], + ) + end end end diff --git a/spec/system/page_objects/modals/sidebar_edit_categories.rb b/spec/system/page_objects/modals/sidebar_edit_categories.rb index 3493669f769..686a6e42559 100644 --- a/spec/system/page_objects/modals/sidebar_edit_categories.rb +++ b/spec/system/page_objects/modals/sidebar_edit_categories.rb @@ -3,26 +3,67 @@ module PageObjects module Modals class SidebarEditCategories < PageObjects::Modals::Base - MODAL_SELECTOR = ".sidebar-categories-form-modal" - def closed? - has_no_css?(MODAL_SELECTOR) + has_no_css?(".sidebar-categories-form-modal") end def has_right_title?(title) - has_css?("#{MODAL_SELECTOR} #discourse-modal-title", text: title) + has_css?(".sidebar-categories-form-modal #discourse-modal-title", text: title) + end + + def has_parent_category_color?(category) + has_css?( + ".sidebar-categories-form-modal .sidebar-categories-form__row", + style: "border-left-color: ##{category.color} ", + ) + end + + def has_category_description_excerpt?(category) + has_css?( + ".sidebar-categories-form-modal .sidebar-categories-form__category-row", + text: category.description_excerpt, + ) + end + + def has_no_categories? + 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"), + ) + end + + def has_categories?(categories) + category_ids = categories.map(&:id) + + has_css?( + ".sidebar-categories-form-modal .sidebar-categories-form__category-row", + count: category_ids.length, + ) && + all(".sidebar-categories-form-modal .sidebar-categories-form__category-row").all? do |row| + category_ids.include?(row["data-category-id"].to_i) + end end def toggle_category_checkbox(category) find( - "#{MODAL_SELECTOR} .sidebar-categories-form__category-row[data-category-id='#{category.id}'] .sidebar-categories-form__input", + ".sidebar-categories-form-modal .sidebar-categories-form__category-row[data-category-id='#{category.id}'] .sidebar-categories-form__input", ).click self end def save - find("#{MODAL_SELECTOR} .sidebar-categories-form__save-button").click + find(".sidebar-categories-form-modal .sidebar-categories-form__save-button").click + self + end + + def filter(text) + find(".sidebar-categories-form-modal .sidebar-categories-form__filter-input-field").fill_in( + with: text, + ) + + self end end end