UX: Minor change to compact tag chooser (#22796)

Followup to f5e8e73.

This switches the placeholder label to the existing string "optional
tags" and only shows it if there are no items picked.

Co-authored-by: Jarek Radosz <jradosz@gmail.com>

app/assets/javascripts/discourse/app/templates/topic.hbs

@@ -72,7 +72,7 @@
                   filterable=true
                   categoryId=this.buffered.category_id
                   minimum=this.minimumRequiredTags
-                  filterPlaceholder="topic_edit.tag_filter_placeholder"
+                  filterPlaceholder="tagging.choose_for_topic"
                   useHeaderFilter=true
                 }}
               />

app/assets/javascripts/discourse/tests/integration/components/select-kit/mini-tag-chooser-test.js

@@ -206,6 +206,25 @@ module(
       assert.dom(".select-kit-collection").doesNotExist();
       assert.dom(".select-kit-header button[data-name='apple']").doesNotExist();
       assert.strictEqual(this.subject.header().value(), "orange,potato");
+
+      assert
+        .dom(".select-kit-header .filter-input")
+        .hasAttribute(
+          "placeholder",
+          "",
+          "Placeholder is empty when there is a selection"
+        );
+
+      await click(".select-kit-header button[data-name='orange']");
+      await click(".select-kit-header button[data-name='potato']");
+
+      assert
+        .dom(".select-kit-header .filter-input")
+        .hasAttribute(
+          "placeholder",
+          "Search...",
+          "Placeholder is back to default when there is no selection"
+        );
     });
   }
 );

app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.hbs

@@ -5,7 +5,7 @@
   <Input
     tabindex={{0}}
     class="filter-input"
-    placeholder={{this.placeholder}}
+    placeholder={{this.computedPlaceholder}}
     autocomplete="off"
     autocorrect="off"
     autocapitalize="off"

app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-filter.js

@@ -1,4 +1,3 @@
-import I18n from "I18n";
 import SelectKitFilterComponent from "select-kit/components/select-kit/select-kit-filter";
 import { isEmpty } from "@ember/utils";
 import discourseComputed from "discourse-common/utils/decorators";
@@ -9,10 +8,11 @@ export default SelectKitFilterComponent.extend({
 
   @discourseComputed("placeholder", "selectKit.hasSelection")
   computedPlaceholder(placeholder, hasSelection) {
-    if (hasSelection) {
+    if (this.hidePlaceholderWithSelection && hasSelection) {
       return "";
     }
-    return isEmpty(placeholder) ? "" : I18n.t(placeholder);
+
+    return isEmpty(placeholder) ? "" : placeholder;
   },
 
   @action

app/assets/javascripts/select-kit/addon/components/multi-select/multi-select-header.hbs

@@ -19,6 +19,7 @@
         this.selectKit.options.filterComponent
         selectKit=this.selectKit
         id=(concat this.selectKit.uniqueID "-filter")
+        hidePlaceholderWithSelection=true
       }}
     </div>
   {{else}}

config/locales/client.en.yml

@@ -3900,8 +3900,6 @@ en:
       personal_message:
         title: "This topic is a personal message"
         help: "This topic is a personal message"
-    topic_edit:
-      tag_filter_placeholder: "+ tag"
     posts: "Posts"
     pending_posts:
       label: "Pending"

plugins/styleguide/assets/javascripts/discourse/components/sections/atoms/dropdowns.hbs

@@ -138,7 +138,7 @@
       @value={{@dummy.selectedTags}}
       @options={{hash
         filterable=true
-        filterPlaceholder="topic_edit.tag_filter_placeholder"
+        filterPlaceholder="tagging.choose_for_topic"
         useHeaderFilter=true
       }}
     />