add basic search to resource tree

scancodeio/static/main.css

@@ -557,3 +557,22 @@ body.full-screen #resource-viewer .message-header {
   background-color: var(--bulma-background);
   border-radius: var(--bulma-radius);
 }
+#resource-tree-container .search-container {
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+#resource-tree-container .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;
+}

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

@@ -15,6 +15,35 @@
 <div id="resource-tree-container" class="container is-fluid p-0">
   <div class="resizable-container is-flex">
     <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>
@@ -135,6 +164,72 @@
           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;
+
+        toggleSearchResults(false);
+        searchInput.blur();
+
+        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') {
+          toggleSearchResults(false);
+          searchInput.blur();
+        }
+      });
+
+      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

@@ -2795,6 +2795,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,