From 609562be3eda8f0e632beb1cb392852cc4ecf0b2 Mon Sep 17 00:00:00 2001 From: Alan Guo Xiang Tan Date: Wed, 21 Jun 2023 10:59:56 +0800 Subject: [PATCH] FEATURE: Add input filter for editing tags in navigation menu modal (#22216) What does this change do? This commit adds an input filter to filter through the tag checkboxes in the modal to edit tags that are shown in the user's navigation menu. The filtering is a simple matching of the given filter term against the names of the tags. --- .../components/sidebar/tags-form-modal.hbs | 64 ++++++++++++------- .../app/components/sidebar/tags-form-modal.js | 27 ++++++++ .../common/components/sidebar-tags-form.scss | 28 ++++++++ .../mobile/components/sidebar-tags-form.scss | 6 ++ config/locales/client.en.yml | 2 + .../editing_sidebar_tags_navigation_spec.rb | 20 ++++++ .../page_objects/modals/sidebar_edit_tags.rb | 13 ++++ 7 files changed, 137 insertions(+), 23 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs b/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs index 2b0400252cd..50018d2d466 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs +++ b/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.hbs @@ -3,32 +3,50 @@ @class="sidebar-tags-form-modal" >
- {{#each this.tags as |tag|}} -
- +
+ {{d-icon "search" class="sidebar-tags-form__filter-input-icon"}} -
- - ({{tag.count}}) - -

- + {{#if (gt this.filteredTags.length 0)}} + {{#each this.filteredTags as |tag|}} +
+ + + +
+ {{/each}} + {{else}} +
+ {{i18n "sidebar.tags_form_modal.no_tags"}}
- {{/each}} + {{/if}} diff --git a/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.js b/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.js index 5f087845f3a..258c7f11b3a 100644 --- a/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.js +++ b/app/assets/javascripts/discourse/app/components/sidebar/tags-form-modal.js @@ -4,10 +4,14 @@ import { inject as service } from "@ember/service"; import { action } from "@ember/object"; import { popupAjaxError } from "discourse/lib/ajax-error"; +import { INPUT_DELAY } from "discourse-common/config/environment"; +import discourseDebounce from "discourse-common/lib/debounce"; export default class extends Component { @service currentUser; @service store; + + @tracked filter = ""; @tracked tags = []; @tracked selectedTags = [...this.currentUser.sidebarTagNames]; @@ -31,6 +35,29 @@ export default class extends Component { }); } + get filteredTags() { + if (this.filter.length === 0) { + return this.tags; + } else { + return this.tags.reduce((acc, tag) => { + if (tag.name.toLowerCase().includes(this.filter)) { + acc.push(tag); + } + + return acc; + }, []); + } + } + + @action + onFilterInput(filter) { + discourseDebounce(this, this.#performFiltering, filter, INPUT_DELAY); + } + + #performFiltering(filter) { + this.filter = filter.toLowerCase(); + } + @action toggleTag(tag) { if (this.selectedTags.includes(tag)) { diff --git a/app/assets/stylesheets/common/components/sidebar-tags-form.scss b/app/assets/stylesheets/common/components/sidebar-tags-form.scss index f2920a92431..12cb5790d1c 100644 --- a/app/assets/stylesheets/common/components/sidebar-tags-form.scss +++ b/app/assets/stylesheets/common/components/sidebar-tags-form.scss @@ -31,4 +31,32 @@ .sidebar-tags-form__tag-label-count { color: var(--primary-medium); } + + .sidebar-tags-form__filter { + display: flex; + flex-direction: row; + margin-right: auto; + width: 100%; + position: relative; + } + + .sidebar-tags-form__filter-input-icon { + position: absolute; + left: 0.5em; + top: 0.65em; + color: var(--primary-low-mid); + } + + .sidebar-tags-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); + } + } } diff --git a/app/assets/stylesheets/mobile/components/sidebar-tags-form.scss b/app/assets/stylesheets/mobile/components/sidebar-tags-form.scss index d20e9bfe914..f9e442d70ce 100644 --- a/app/assets/stylesheets/mobile/components/sidebar-tags-form.scss +++ b/app/assets/stylesheets/mobile/components/sidebar-tags-form.scss @@ -1,3 +1,9 @@ +.sidebar-tags-form-modal { + .modal-inner-container { + width: 35em; + } +} + .sidebar-tags-form { .sidebar-tags-form__tag { flex-basis: 100%; diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 9affca2668d..e96af115268 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -4399,6 +4399,8 @@ en: reset_to_defaults: "Reset to defaults" tags_form_modal: title: "Edit tags navigation" + filter_placeholder: "Filter tags" + no_tags: "There are no tags matching the given term." sections: custom: diff --git a/spec/system/editing_sidebar_tags_navigation_spec.rb b/spec/system/editing_sidebar_tags_navigation_spec.rb index ccc281cb165..5ec9800363d 100644 --- a/spec/system/editing_sidebar_tags_navigation_spec.rb +++ b/spec/system/editing_sidebar_tags_navigation_spec.rb @@ -49,4 +49,24 @@ RSpec.describe "Editing sidebar tags navigation", type: :system do expect(sidebar).to have_no_section_link(tag2.name) expect(sidebar).to have_no_section_link(tag3.name) end + + it "allows a user to filter the tags in the modal by the tag's name" do + visit "/latest" + + expect(sidebar).to have_tags_section + + modal = sidebar.click_edit_tags_button + + modal.filter("tag") + + expect(modal).to have_tag_checkboxes([tag, tag2, tag3]) + + modal.filter("tag2") + + expect(modal).to have_tag_checkboxes([tag2]) + + modal.filter("someinvalidterm") + + expect(modal).to have_no_tag_checkboxes + 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 2b3b0cdcba2..d3c078bd5c8 100644 --- a/spec/system/page_objects/modals/sidebar_edit_tags.rb +++ b/spec/system/page_objects/modals/sidebar_edit_tags.rb @@ -20,6 +20,14 @@ module PageObjects end end + def has_no_tag_checkboxes? + has_no_css?(".sidebar-tags-form-modal .sidebar-tags-form__tag") && + has_css?( + ".sidebar-tags-form-modal .sidebar-tags-form__no-tags", + text: I18n.t("js.sidebar.tags_form_modal.no_tags"), + ) + end + def toggle_tag_checkbox(tag) find( ".sidebar-tags-form-modal .sidebar-tags-form__tag[data-tag-name='#{tag.name}'] .sidebar-tags-form__input", @@ -32,6 +40,11 @@ module PageObjects find(".sidebar-tags-form-modal .sidebar-tags-form__save-button").click self end + + def filter(text) + find(".sidebar-tags-form-modal .sidebar-tags-form__filter-input-field").fill_in(with: text) + self + end end end end