Improve search error messages

When a more specific error message is available from the search backend,
show the user that instead of a blanket "There was an error, try
searching again."

In github.com/edx/edx-search, we're proposing removing quotes from the
list of reserved characters in Elastic search terms. This enables
searching for exact phrases, but also introduces the possibility of
malformed queries. In those cases, it would be nice to give the user a
hint that they need to change their query, instead of simply trying the
same one again.

lms/static/js/discovery/discovery_factory.js

@@ -72,7 +72,7 @@
                 });
 
                 dispatcher.listenTo(search, 'error', function() {
-                    form.showErrorMessage();
+                    form.showErrorMessage(search);
                     form.hideLoadingIndicator();
                 });
 

lms/static/js/discovery/models/search_state.js

@@ -72,10 +72,12 @@
             reset: function() {
                 this.discovery.reset();
                 this.page = 0;
+                this.errorMessage = '';
             },
 
             onError: function(collection, response, options) {
                 if (response.statusText !== 'abort') {
+                    this.errorMessage = response.responseJSON.error;
                     this.trigger('error');
                 }
             },

lms/static/js/discovery/views/search_form.js

@@ -60,8 +60,12 @@
                 this.clearSearch();
             },
 
-            showErrorMessage: function() {
-                this.$message.html(gettext('There was an error, try searching again.'));
+            showErrorMessage: function(search) {
+                if (search && search.errorMessage) {
+                    this.$message.html(gettext(search.errorMessage));
+                } else {
+                    this.$message.html(gettext('There was an error, try searching again.'));
+                }
             }
 
         });

openedx/features/course_search/static/course_search/js/collections/search_collection.js

@@ -40,9 +40,11 @@
                     },
                     type: 'POST',
                     success: function(self) {
+                        self.errorMessage = '';
                         self.trigger('search');
                     },
-                    error: function(self) {
+                    error: function(self, response) {
+                        self.errorMessage = response.responseJSON.error;
                         self.trigger('error');
                     }
                 });
@@ -63,7 +65,8 @@
                         self.page += 1;  // eslint-disable-line no-param-reassign
                         self.trigger('next');
                     },
-                    error: function(self) {
+                    error: function(self, response) {
+                        self.errorMessage = response.responseJSON.error;
                         self.trigger('error');
                     },
                     add: true,

openedx/features/course_search/static/course_search/js/views/search_results_view.js

@@ -93,7 +93,7 @@
             },
 
             showErrorMessage: function() {
-                HtmlUtils.setHtml(this.$el, HtmlUtils.template(this.errorTemplate)());
+                HtmlUtils.setHtml(this.$el, HtmlUtils.template(this.errorTemplate)({errorMessage: this.collection.errorMessage}));
                 this.showResults();
             },
 

openedx/features/course_search/static/course_search/templates/search_error.underscore

@@ -1 +1 @@
-<%- gettext("There was an error, try searching again.") %>
+<% if (errorMessage) { %><%- errorMessage %><%} else {%><%- gettext("There was an error, try searching again.") %><% } %>