From fd3a8583dd5c5f18c3f91839555744fa251586a6 Mon Sep 17 00:00:00 2001
From: Robin Ward <robin.ward@gmail.com>
Date: Tue, 9 Aug 2016 15:11:58 -0400
Subject: [PATCH] UX: Display a message when the search term is too short on
 full page

---
 .../controllers/full-page-search.js.es6       | 30 +++++++++----------
 .../discourse/templates/full-page-search.hbs  | 10 +++++--
 .../stylesheets/common/base/search.scss       |  4 +++
 config/locales/client.en.yml                  |  1 +
 4 files changed, 27 insertions(+), 18 deletions(-)

diff --git a/app/assets/javascripts/discourse/controllers/full-page-search.js.es6 b/app/assets/javascripts/discourse/controllers/full-page-search.js.es6
index b2a5aeaeca9..b33f338f6fb 100644
--- a/app/assets/javascripts/discourse/controllers/full-page-search.js.es6
+++ b/app/assets/javascripts/discourse/controllers/full-page-search.js.es6
@@ -26,6 +26,7 @@ export default Ember.Controller.extend({
   searching: false,
   sortOrder: 0,
   sortOrders: SortOrders,
+  invalidSearch: false,
 
   @computed('model.posts')
   resultCount(posts) {
@@ -69,11 +70,6 @@ export default Ember.Controller.extend({
     return isValidSearchTerm(q);
   },
 
-  @computed('searchTerm', 'searching')
-  searchButtonDisabled(searchTerm, searching) {
-    return !!(searching || !isValidSearchTerm(searchTerm));
-  },
-
   @computed('q')
   noSortQ(q) {
     if (q) {
@@ -107,7 +103,7 @@ export default Ember.Controller.extend({
   @observes('sortOrder')
   triggerSearch() {
     if (this._searchOnSortChange) {
-      this.search();
+      this._search();
     }
   },
 
@@ -147,14 +143,21 @@ export default Ember.Controller.extend({
     return this.currentUser && !this.site.mobileView;
   },
 
-  search(){
-    if (this.get("searching")) return;
-    this.set("searching", true);
+  _search() {
+    if (this.get("searching")) { return; }
 
+    this.set('invalidSearch', false);
+    const searchTerm = this.get('searchTerm');
+    if (!isValidSearchTerm(searchTerm)) {
+      this.set('invalidSearch', true);
+      return;
+    }
+
+    this.set("searching", true);
     this.set('bulkSelectEnabled', false);
     this.get('selected').clear();
 
-    var args = { q: this.get("searchTerm") };
+    var args = { q: searchTerm };
 
     const sortOrder = this.get("sortOrder");
     if (sortOrder && SortOrders[sortOrder].term) {
@@ -203,18 +206,13 @@ export default Ember.Controller.extend({
       this.get('selected').clear();
     },
 
-    refresh() {
-      this.search();
-    },
-
     showSearchHelp() {
       // TODO: dupe code should be centralized
       ajax("/static/search_help.html", { dataType: 'html' }).then(model => showModal('searchHelp', { model }));
     },
 
     search() {
-      if (this.get("searchButtonDisabled")) return;
-      this.search();
+      this._search();
     }
   }
 });
diff --git a/app/assets/javascripts/discourse/templates/full-page-search.hbs b/app/assets/javascripts/discourse/templates/full-page-search.hbs
index d4409563158..5a57cfa87bc 100644
--- a/app/assets/javascripts/discourse/templates/full-page-search.hbs
+++ b/app/assets/javascripts/discourse/templates/full-page-search.hbs
@@ -1,6 +1,6 @@
 <div class="search row clearfix">
   {{search-text-field value=searchTerm class="full-page-search input-xxlarge search no-blur" action="search" hasAutofocus=hasAutofocus}}
-  {{d-button action="search" icon="search" class="btn-primary" disabled=searchButtonDisabled}}
+  {{d-button action="search" icon="search" class="btn-primary" disabled=searching}}
 
   {{#if canCreateTopic}}
     <span class="new-topic-btn">{{d-button id="create-topic" class="btn-default" action="createTopic" actionParam=searchTerm icon="plus" label="topic.create"}}</span>
@@ -8,7 +8,7 @@
 
   {{#if canBulkSelect}}
     {{d-button icon="list" class="bulk-select" title="topics.bulk.toggle" action="toggleBulkSelect"}}
-    {{bulk-select-button selected=selected action="refresh"}}
+    {{bulk-select-button selected=selected action="search"}}
   {{/if}}
 </div>
 
@@ -19,6 +19,12 @@
   </div>
 {{/if}}
 
+{{#if invalidSearch}}
+  <div class='fps-invalid'>
+    {{i18n "search.too_short"}}
+  </div>
+{{/if}}
+
 {{#if context}}
   <div class='fps-search-context'>
     <label>
diff --git a/app/assets/stylesheets/common/base/search.scss b/app/assets/stylesheets/common/base/search.scss
index 12b37d9ffef..835a17bf812 100644
--- a/app/assets/stylesheets/common/base/search.scss
+++ b/app/assets/stylesheets/common/base/search.scss
@@ -1,3 +1,7 @@
+.fps-invalid {
+  margin-bottom: 1em;
+}
+
 .fps-result {
 
   .author {
diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml
index 79d0fe1cd65..8883d52f2d0 100644
--- a/config/locales/client.en.yml
+++ b/config/locales/client.en.yml
@@ -1185,6 +1185,7 @@ en:
       most_liked: "Most Liked"
       select_all: "Select All"
       clear_all: "Clear All"
+      too_short: "Sorry, your search term is too short. Please try a longer query."
       result_count:
         one: "1 result for <span class='term'>\"{{term}}\"</span>"
         other: "{{count}} results for <span class='term'>\"{{term}}\"</span>"