Merge pull request #8277 from martenson/datalib-folderfilter

Data libraries folder filter

client/galaxy/scripts/mvc/library/library-folderlist-view.js

@@ -277,6 +277,21 @@ var FolderListView = Backbone.View.extend({
         this.renderSortIcon();
     },
 
+    /**
+     * In case the search_term is not empty perform the search and render
+     * the result. Render all visible folder items otherwise.
+     * @param  {string} search_term string to search for
+     */
+    searchFolder: function(search_term) {
+        const trimmed_term = $.trim(search_term);
+        if (trimmed_term !== "") {
+            const result_collection = this.folder_container.search(search_term);
+            this.collection.reset(result_collection);
+        } else {
+            this.paginate();
+        }
+    },
+
     /**
      * User clicked the checkbox in the table heading
      * @param  {context} event
@@ -466,7 +481,7 @@ var FolderListView = Backbone.View.extend({
                             <a title="Return to this folder" href="#/folders/<%- path_item[0] %>">
                                 <%- path_item[1] %>
                             </a>
-                        </li> 
+                        </li>
                     <% } else { %>
                         <li class="breadcrumb-item active">
                             <span title="You are in this folder">
@@ -509,7 +524,7 @@ var FolderListView = Backbone.View.extend({
                         <a class="sort-folder-state" title="Click to reverse order" href="#">State</a>
                         <span title="Sorted by State" class="sort-icon-state fa"></span>
                     </th>
-                    <th style="width:160px;"></th> 
+                    <th style="width:160px;"></th>
                 </thead>
                 <tbody id="folder_list_body">
                     <tr id="first_folder_item">

client/galaxy/scripts/mvc/library/library-foldertoolbar-view.js

@@ -25,7 +25,8 @@ var FolderToolbarView = Backbone.View.extend({
         "click .toolbtn-show-locinfo": "showLocInfo",
         "keydown .page_size": "changePageSize",
         "blur .page_size": "changePageSize",
-        "click .toolbtn-collection-import": "showCollectionSelect"
+        "click .toolbtn-collection-import": "showCollectionSelect",
+        "keyup .folder-search-input": "searchFolder"
     },
 
     defaults: {
@@ -1420,6 +1421,17 @@ var FolderToolbarView = Backbone.View.extend({
         return hdca.save(options);
     },
 
+    /**
+     * Take the contents of the search field and send it to the list view
+     * to query the collection of folder items.
+     */
+    searchFolder: function(event) {
+        const Galaxy = getGalaxyInstance();
+        const search_term = $(".folder-search-input").val();
+        this.options.search_term = search_term;
+        Galaxy.libraries.folderListView.searchFolder(search_term);
+    },
+
     templateToolBar: function() {
         return _.template(
             `<div class="library_style_container">
@@ -1429,6 +1441,7 @@ var FolderToolbarView = Backbone.View.extend({
                     </a>
                     <div>
                         <form class="form-inline">
+                            <input type="text" id="folder-filter" class="form-control folder-search-input mr-1" placeholder="Search" size="15">
                             <button style="display:none;" title="Create new folder"
                                 class="btn btn-secondary toolbtn-create-folder add-library-items add-library-items-folder mr-1"
                                 type="button">

client/galaxy/scripts/mvc/library/library-model.js

@@ -88,6 +88,22 @@ var FolderContainer = Backbone.Model.extend({
         urlRoot: `${getAppRoot()}api/folders/`,
         id: "unknown"
     },
+
+    /**
+     * Search the folder and return only the models that have
+     * the search term in their names.
+     * [the term to search]
+     * @type {string}
+     */
+    search: function(search_term) {
+        if (search_term == "") return this;
+        const lowercase_term = search_term.toLowerCase();
+        return this.get("folder").filter(data => {
+            const lowercase_name = data.get("name").toLowerCase();
+            return lowercase_name.indexOf(lowercase_term) !== -1;
+        });
+    },
+
     parse: function(obj) {
         const Galaxy = getGalaxyInstance();
         // empty the collection