feat: enhance tree search rendering and implementation (#2133)

Signed-off-by: tdruez <tdruez@aboutcode.org>

Author: tdruez

scancodeio/static/main.css

@@ -551,10 +551,11 @@ body.full-screen #resource-viewer .message-header {
   min-width: 0;
   max-width: 100%;
   border-right: 1px solid #ccc;
-  overflow: visible;
+  min-height: 0;
+  height: 100vh;
+  overflow: auto;
   display: flex;
   flex-direction: column;
-  min-height: 0;
   flex-basis: 25%;
   transition: opacity 0.2s ease;
   position: relative;
@@ -573,7 +574,6 @@ body.full-screen #resource-viewer .message-header {
   top: 0;
   z-index: 20;
   background: var(--bulma-scheme-main);
-  padding: .25rem 0 .5rem;
 }
 #resource-tree-container #clear-search {
   display: inline-flex;
@@ -615,7 +615,7 @@ body.full-screen #resource-viewer .message-header {
   align-items: center;
   gap: .5rem;
   color: var(--bulma-text);
-  font-size: 14px;
+  font-size: 15px;
   line-height: 20px;
   font-weight: 400;
   white-space: nowrap;
@@ -635,13 +635,13 @@ body.full-screen #resource-viewer .message-header {
 }
 #resource-tree-container .search-result-item .icon i,
 .search-dropdown.search-dropdown-portal .search-result-item .icon i {
-  font-size: 13px;
+  font-size: 15px;
 }
 #resource-tree-container .search-result-path,
 .search-dropdown.search-dropdown-portal .search-result-path {
   overflow: hidden;
   text-overflow: ellipsis;
-  font-size: 14px;
+  font-size: 15px;
 }
 #resource-tree-container .left-pane.collapsed {
   opacity: 0;

scanpipe/templates/scanpipe/tree/resource_left_pane.html

@@ -3,4 +3,4 @@
 
 <div id="resource-tree" class="resource-tree-scroll">
   {% include "scanpipe/tree/resource_left_pane_tree.html" with children=children %}
-</div>
+</div>

scanpipe/templates/scanpipe/tree/resource_search_bar.html

@@ -5,12 +5,11 @@
         id="file-search-input"
         class="input is-small"
         type="text"
-        placeholder="Go to file..."
+        placeholder="Go to file"
         autocomplete="off"
         hx-get="{% url 'project_resource_tree_search' project.slug %}"
         hx-target="#search-results"
-        hx-trigger="input changed delay:200ms"
-        hx-include="this"
+        hx-trigger="input changed delay:300ms"
         name="search"
       >
       <span class="icon is-small is-left">
@@ -27,4 +26,4 @@
     </div>
   </div>
   <div id="search-results" class="search-dropdown is-hidden"></div>
-</div>
+</div>

scanpipe/templates/scanpipe/tree/resource_search_results.html

@@ -12,7 +12,7 @@
         hx-push-url="{% url 'project_resource_tree' project.slug resource.path %}"
         data-path="{{ resource.path }}"
         title="{{ resource.path }}">
-        <span class="icon mr-2">
+        <span class="icon">
           {% if resource.is_dir %}
             <i class="fas fa-folder"></i>
           {% else %}
@@ -24,10 +24,10 @@
     {% endfor %}
   </div>
 {% elif query %}
-  <div class="has-text-centered px-4 py-5">
-    <div class="icon is-large has-text-grey-light mb-3">
+  <div class="has-text-centered py-5">
+    <div class="icon is-large has-text-grey-light mb-2">
       <i class="fas fa-search fa-2x"></i>
     </div>
     <p class="has-text-grey">No files found matching "{{ query }}"</p>
   </div>
-{% endif %}
+{% endif %}

scanpipe/templates/scanpipe/tree/resource_table.html

@@ -46,7 +46,7 @@
     {% if page_obj.has_next %}
       <a
         class="pagination-next"
-        hx-get="{% url 'project_resource_tree_right_pane' project.slug path%}?page={{ page_obj.next_page_number }}"
+        hx-get="{% url 'project_resource_tree_right_pane' project.slug path %}?page={{ page_obj.next_page_number }}"
         hx-target="#right-pane"
         hx-push-url="{% url 'project_resource_tree' project.slug path %}?page={{ page_obj.next_page_number }}">
         Next page

scanpipe/tests/test_views.py

@@ -1742,7 +1742,7 @@ def test_scanpipe_views_project_resource_tree_right_pane_view_empty_directory(se
         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")
+        r1 = make_resource_file(self.project1, path="src/FooBar.py")
         make_resource_file(self.project1, path="src/other.py")
 
         url = reverse(
@@ -1752,9 +1752,7 @@ def test_scanpipe_views_project_resource_tree_search_view_filters_results(self):
 
         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"]]
-        )
+        self.assertQuerySetEqual([r1], response.context["search_results"])
 
     @mock.patch("scanpipe.views.ProjectResourceTreeRightPaneView.paginate_by", 2)
     def test_scanpipe_views_project_resource_tree_right_pane_view_pagination(self):

scanpipe/urls.py

@@ -137,7 +137,7 @@
     ),
     path(
         "project/<slug:slug>/resource_tree/search/",
-        views.ProjectResourceSearchView.as_view(),
+        views.ProjectResourceTreeSearchView.as_view(),
         name="project_resource_tree_search",
     ),
     path(

scanpipe/views.py

@@ -2846,7 +2846,7 @@ def get_context_data(self, **kwargs):
         return context
 
 
-class ProjectResourceSearchView(
+class ProjectResourceTreeSearchView(
     ConditionalLoginRequired,
     ProjectRelatedViewMixin,
     generic.ListView,
@@ -2856,22 +2856,25 @@ class ProjectResourceSearchView(
     context_object_name = "search_results"
     paginate_by = 30
 
+    def setup(self, request, *args, **kwargs):
+        super().setup(request, *args, **kwargs)
+        self.search_query = request.GET.get("search", "").strip()
+
     def get_queryset(self):
-        search_query = self.request.GET.get("search", "").strip()
-        if not search_query:
+        if not self.search_query:
             return super().get_queryset().none()
 
         return (
             super()
             .get_queryset()
-            .filter(path__icontains=search_query)
+            .filter(path__icontains=self.search_query)
             .only("project_id", "path", "type")
             .order_by("path")
         )
 
     def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
-        context["query"] = self.request.GET.get("search", "").strip()
+        context["query"] = self.search_query
         return context