fix search bar css and add tests

Signed-off-by: Aayush Kumar <code@aayushk.dev>

Author: aayushkdev

scancodeio/static/main.css

@@ -575,8 +575,14 @@ body.full-screen #resource-viewer .message-header {
   background: var(--bulma-scheme-main);
   padding: .25rem 0 .5rem;
 }
-#resource-tree-container .search-container .field {
-  margin-bottom: 0;
+#resource-tree-container #clear-search {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  pointer-events: auto;
 }
 #resource-tree-container .search-dropdown {
   position: absolute;
@@ -614,10 +620,6 @@ body.full-screen #resource-viewer .message-header {
   font-weight: 400;
   white-space: nowrap;
 }
-#resource-tree-container .search-results,
-.search-dropdown.search-dropdown-portal .search-results {
-  margin: 0;
-}
 #resource-tree-container .search-result-item:hover,
 #resource-tree-container .search-result-item.is-active,
 .search-dropdown.search-dropdown-portal .search-result-item:hover,

scanpipe/templates/scanpipe/tree/resource_left_pane.html

@@ -1,7 +1,7 @@
 {% include "scanpipe/tree/resource_left_pane_header.html" only %}
 <div class="mb-3 search-container" id="resource-search-container">
-  <div class="field has-addons">
-    <div class="control has-icons-left is-expanded">
+  <div class="field mb-0">
+    <div class="control has-icons-left has-icons-right is-expanded">
       <input
         id="file-search-input"
         class="input is-small"
@@ -17,12 +17,13 @@
       <span class="icon is-small is-left">
         <i class="fas fa-search"></i>
       </span>
-    </div>
-    <div class="control">
-      <button id="clear-search" class="button is-small is-hidden" type="button" aria-label="Clear search">
-        <span class="icon is-small">
-          <i class="fas fa-times"></i>
-        </span>
+      <button
+        id="clear-search"
+        class="icon is-small is-right is-hidden has-text-grey"
+        type="button"
+        aria-label="Clear search"
+        >
+        <i class="fas fa-times"></i>
       </button>
     </div>
   </div>

scanpipe/templates/scanpipe/tree/resource_search_results.html

@@ -1,5 +1,5 @@
 {% if search_results %}
-  <div class="search-results">
+  <div class="search-results m-0">
     {% for resource in search_results %}
       <a
         class="search-result-item px-4 py-2 is-clickable"

scanpipe/tests/test_views.py

@@ -1741,6 +1741,21 @@ def test_scanpipe_views_project_resource_tree_right_pane_view_empty_directory(se
         resources = list(response.context["resources"])
         self.assertEqual(0, len(resources))
 
+    def test_scanpipe_views_project_resource_tree_search_view_filters_results(self):
+        make_resource_file(self.project1, path="src/FooBar.py")
+        make_resource_file(self.project1, path="src/other.py")
+
+        url = reverse(
+            "project_resource_tree_search", kwargs={"slug": self.project1.slug}
+        )
+        response = self.client.get(url, data={"search": "foobar"})
+
+        self.assertEqual(200, response.status_code)
+        self.assertEqual("foobar", response.context["query"])
+        self.assertEqual(
+            ["src/FooBar.py"], [r.path for r in response.context["search_results"]]
+        )
+
     @mock.patch("scanpipe.views.ProjectResourceTreeRightPaneView.paginate_by", 2)
     def test_scanpipe_views_project_resource_tree_right_pane_view_pagination(self):
         make_resource_directory(self.project1, path="parent")