add basic search to resource tree

Signed-off-by: Aayush Kumar <[email protected]>

Author: aayushkdev

scanpipe/templates/scanpipe/panels/resource_search_results.html

@@ -0,0 +1,30 @@
+{% if search_results %}
+  <div class="search-results">
+    {% for resource in search_results %}
+      <div class="dropdown-item p-2 is-clickable" 
+           data-path="{{ resource.path }}"
+           data-is-dir="{% if resource.is_dir %}true{% else %}false{% endif %}">
+        <div class="is-flex is-align-items-center">
+          <span class="icon is-small mr-2">
+            {% if resource.is_dir %}
+              <i class="fas fa-folder"></i>
+            {% else %}
+              <i class="far fa-file"></i>
+            {% endif %}
+          </span>
+          <div class="is-flex-grow-1">
+            <div class="has-text-weight-semibold">{{ resource.name }}</div>
+            <div class="has-text-grey is-size-7 break-all">{{ resource.path }}</div>
+          </div>
+        </div>
+      </div>
+    {% endfor %}
+  </div>
+{% elif query %}
+  <div class="has-text-centered p-4">
+    <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 %}

scanpipe/templates/scanpipe/resource_tree.html

@@ -83,6 +83,25 @@
       background-color: var(--bulma-background);
       border-radius: var(--bulma-radius);
     }
+    .search-container {
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+    .search-dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      right: 0;
+      z-index: 1000;
+      border: 1px solid var(--bulma-border);
+      border-radius: var(--bulma-radius);
+      background: var(--bulma-scheme-main);
+      box-shadow: var(--bulma-shadow);
+      max-height: 400px;
+      overflow-y: auto;
+      margin-top: 4px;
+    }
   </style>
 {% endblock %}
 
@@ -98,6 +117,36 @@
 
 <div class="resizable-container">
   <div id="left-pane" class="left-pane px-2">
+    <div class="mb-3 search-container">
+      <div class="field has-addons">
+        <div class="control has-icons-left is-expanded">
+          <input 
+            id="file-search-input" 
+            class="input is-small" 
+            type="text" 
+            placeholder="Go to file..."
+            autocomplete="off"
+            hx-get="{% url 'codebase_resource_search' project.slug %}"
+            hx-target="#search-results"
+            hx-trigger="input changed"
+            hx-include="this"
+            name="search"
+          >
+          <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" type="button">
+            <span class="icon is-small">
+              <i class="fas fa-times"></i>
+            </span>
+          </button>
+        </div>
+      </div>
+      <div id="search-results" class="search-dropdown is-hidden"></div>
+    </div>
+    
     <div id="resource-tree">
       {% include "scanpipe/panels/codebase_tree_panel.html" with children=children path=path %}
     </div>
@@ -219,6 +268,70 @@
           document.body.style.userSelect = '';
         }
       });
+      
+      const searchInput = document.getElementById('file-search-input');
+      const searchResults = document.getElementById('search-results');
+      const clearSearchBtn = document.getElementById('clear-search');
+      
+      function toggleSearchResults(show = null) {
+        const shouldShow = show !== null ? show : searchInput.value.trim();
+        searchResults.classList.toggle('is-hidden', !shouldShow);
+      }
+      
+      function clearSearch() {
+        searchInput.value = '';
+        toggleSearchResults(false);
+        searchInput.focus();
+      }
+      
+      function handleSearchResultClick(searchResultItem) {
+        const path = searchResultItem.dataset.path;
+        
+        clearSearch();
+        
+        fetch(`{% url 'codebase_resource_table' project.slug %}?path=${encodeURIComponent(path)}`)
+          .then(response => response.text())
+          .then(html => {
+            document.getElementById('right-pane').innerHTML = html;
+            htmx.process(document.getElementById('right-pane'));
+            if (typeof enableCopyToClipboard === 'function') {
+              enableCopyToClipboard('.copy-to-clipboard');
+            }
+            const newUrl = `{% url 'codebase_resource_tree' project.slug %}?path=${encodeURIComponent(path)}`;
+            window.history.pushState(null, '', newUrl);
+            expandToPath(path);
+          });
+      }
+      
+      searchInput.addEventListener('focus', () => toggleSearchResults());
+      searchInput.addEventListener('input', () => toggleSearchResults());
+      
+      clearSearchBtn.addEventListener('click', clearSearch);
+      
+      searchInput.addEventListener('keydown', function(e) {
+        if (e.key === 'Escape') {
+          clearSearch();
+        }
+      });
+      
+      document.addEventListener('click', function(e) {
+        const searchResultItem = e.target.closest('.dropdown-item');
+        if (searchResultItem) {
+          e.preventDefault();
+          handleSearchResultClick(searchResultItem);
+          return;
+        }
+        
+        if (!searchInput.contains(e.target) && !searchResults.contains(e.target)) {
+          toggleSearchResults(false);
+        }
+      });
+      
+      document.body.addEventListener('htmx:afterSettle', function(evt) {
+        if (evt.target === searchResults) {
+          toggleSearchResults();
+        }
+      });
     });
   </script>
 {% endblock %}

scanpipe/urls.py

@@ -136,6 +136,11 @@
         views.CodebaseResourceTreeView.as_view(),
         name="codebase_resource_tree",
     ),
+    path(
+        "project/<slug:slug>/resource_search/",
+        views.CodebaseResourceSearchView.as_view(),
+        name="codebase_resource_search",
+    ),
     path(
         "project/<slug:slug>/resource_table/",
         views.CodebaseResourceTableView.as_view(),

scanpipe/views.py

@@ -2790,6 +2790,28 @@ def get(self, request, *args, **kwargs):
         return render(request, self.template_name, context)
 
 
+class CodebaseResourceSearchView(
+    ConditionalLoginRequired,
+    ProjectRelatedViewMixin,
+    generic.ListView,
+):
+    model = CodebaseResource
+    template_name = "scanpipe/panels/resource_search_results.html"
+    context_object_name = "search_results"
+    paginate_by = 30
+
+    def get_queryset(self):
+        qs = super().get_queryset()
+        search_query = self.request.GET.get("search", "").strip()
+        qs = qs.filter(path__icontains=search_query)
+        return qs.only("path", "type", "name").order_by("path")
+
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["query"] = self.request.GET.get("search", "")
+        return context
+
+
 class CodebaseResourceTableView(
     ConditionalLoginRequired,
     ProjectRelatedViewMixin,