From beace438a49038cc2cfede66a9bc7a5eb8a5c25c Mon Sep 17 00:00:00 2001
From: Ben Warzeski <bwarzeski@edx.org>
Date: Tue, 28 Jul 2020 09:21:59 -0400
Subject: [PATCH] update search description on new search string (#24619)

* update search description on new search string

* disable xss-lint rule for jquery.html
---
 .../teams/js/spec/views/teams_tab_spec.js     | 19 ++++++--
 .../teams/static/teams/js/views/teams_tab.js  | 43 ++++++++++++-------
 2 files changed, 44 insertions(+), 18 deletions(-)

diff --git a/lms/djangoapps/teams/static/teams/js/spec/views/teams_tab_spec.js b/lms/djangoapps/teams/static/teams/js/spec/views/teams_tab_spec.js
index ce0b7cf4c9..566d43c816 100644
--- a/lms/djangoapps/teams/static/teams/js/spec/views/teams_tab_spec.js
+++ b/lms/djangoapps/teams/static/teams/js/spec/views/teams_tab_spec.js
@@ -340,15 +340,28 @@ define([
                 teamsTabView.$('.search-field').val('');
                 teamsTabView.$('.action-search').click();
 
-                verifyTeamsRequest({
-                    order_by: 'last_activity_at'
-                });
+                verifyTeamsRequest({ order_by: 'last_activity_at' });
                 AjaxHelpers.respondWithJson(requests, {});
                 AjaxHelpers.respondWithJson(requests, { count: 0 });
                 expect(teamsTabView.$('.page-title').text()).toBe('Test Topic 1');
                 expect(teamsTabView.$('.page-description').text()).toBe('Test description 1');
             });
 
+            it('updates the description when search string updates', function() {
+                var newString = 'bar';
+                setUpTopicTab();
+                performSearch();
+                expect(teamsTabView.$('.page-title').text()).toBe('Team Search');
+                expect(teamsTabView.$('.page-description').text()).toBe('Showing results for "foo"');
+                teamsTabView.$('.search-field').val(newString);
+                teamsTabView.$('.action-search').click();
+                AjaxHelpers.respondWithJson(requests, { count: 0 });
+                expect(teamsTabView.$('.page-title').text()).toBe('Team Search');
+                expect(teamsTabView.$('.page-description').text()).toBe(
+                  'Showing results for "' + newString + '"'
+                );
+            });
+
             it('can navigate back to all teams from a search', function() {
                 setUpTopicTab();
                 // Perform a search
diff --git a/lms/djangoapps/teams/static/teams/js/views/teams_tab.js b/lms/djangoapps/teams/static/teams/js/views/teams_tab.js
index 88819e8d6a..2ab5a2ed7b 100644
--- a/lms/djangoapps/teams/static/teams/js/views/teams_tab.js
+++ b/lms/djangoapps/teams/static/teams/js/views/teams_tab.js
@@ -238,10 +238,7 @@
                                 collection: view.teamsCollection,
                                 breadcrumbs: view.createBreadcrumbs(topic),
                                 title: gettext('Team Search'),
-                                description: StringUtils.interpolate(
-                                    gettext('Showing results for "{searchString}"'),
-                                    {searchString: view.teamsCollection.getSearchString()}
-                                ),
+                                description: view.searchDescription(),
                                 showSortControls: false
                             });
                             view.render();
@@ -377,6 +374,16 @@
                     return deferred.promise();
                 },
 
+                /**
+                 * Return a translated search description string from the teams collection
+                 */
+                searchDescription: function() {
+                    return StringUtils.interpolate(
+                        gettext('Showing results for "{searchString}"'),
+                        {searchString: this.teamsCollection.getSearchString()}
+                    );
+                },
+
                 createTeamsListView: function(options) {
                     var topic = options.topic,
                         collection = options.collection,
@@ -408,18 +415,24 @@
                     //    topic teams page.
                     // 3. Otherwise, do nothing and remain on the current page.
                     // Note: Backbone makes this a no-op if redirecting to the current page.
-                    this.listenTo(collection, 'sync', function() {
-                        // Clear the stale flag here as by definition the collection is up-to-date,
-                        // and the flag itself isn't guaranteed to be cleared yet. This is to ensure
-                        // that the collection doesn't unnecessarily get refreshed again.
-                        collection.isStale = false;
+                    this.listenTo(
+                        collection,
+                        'sync',
+                        _.bind(function() {
+                            // Clear the stale flag here as by definition the collection is up-to-date,
+                            // and the flag itself isn't guaranteed to be cleared yet. This is to ensure
+                            // that the collection doesn't unnecessarily get refreshed again.
+                            collection.isStale = false;
 
-                        if (collection.getSearchString()) {
-                            Backbone.history.navigate(searchUrl, {trigger: true});
-                        } else if (Backbone.history.getFragment() === searchUrl) {
-                            Backbone.history.navigate('topics/' + topic.get('id'), {trigger: true});
-                        }
-                    });
+                            if (collection.getSearchString()) {
+                                Backbone.history.navigate(searchUrl, {trigger: true});
+                                // xss-lint: disable=javascript-jquery-html
+                                this.$el.find('.page-description').html(this.searchDescription());
+                            } else if (Backbone.history.getFragment() === searchUrl) {
+                                Backbone.history.navigate('topics/' + topic.get('id'), {trigger: true});
+                            }
+                        }, this)
+                    );
                     return viewWithHeader;
                 },