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