add left-pane file tree view and related templates

Author: aayushkdev

scanpipe/templates/scanpipe/panels/file_tree_panel.html

@@ -0,0 +1,42 @@
+<ul class="pl-2">
+  {% for node in children %}
+    <li class="mb-1">
+      {% if node.is_dir %}
+        <div
+          class="tree-node is-flex is-align-items-center has-text-weight-semibold is-clickable px-1"
+          data-folder
+          {% if node.has_children %}
+            data-target="{{ node.path|slugify }}"
+            data-url="{% url 'file_tree' slug=project.slug %}?path={{ node.path }}"
+          {% endif %}
+        >
+        <span class="icon is-small chevron mr-1"
+          data-chevron
+          {% if not node.has_children %}
+            style="visibility: hidden;"
+          {% endif %}
+        >
+          <i class="fas fa-chevron-right"></i>
+        </span>
+
+          <span
+            class="is-flex is-align-items-center folder-meta">
+            <span class="icon is-small mr-1"><i class="fas fa-folder"></i></span>
+            <span>{{ node.name }}</span>
+          </span>
+        </div>
+
+        {% if node.has_children %}
+          <div id="dir-{{ node.path|slugify }}" class="ml-4 hidden" data-loaded="false"></div>
+        {% endif %}
+
+      {% else %}
+        <div
+          class="is-flex is-align-items-center ml-5" style="cursor: pointer;">
+          <span class="icon is-small mr-1"><i class="fas fa-file"></i></span>
+          <span>{{ node.name }}</span>
+        </div>
+      {% endif %}
+    </li>
+  {% endfor %}
+</ul>

scanpipe/templates/scanpipe/resource_tree.html

@@ -0,0 +1,67 @@
+{% extends "scanpipe/base.html" %}
+{% load static %}
+{% block title %}ScanCode.io: {{ project.name }} - Resource{% endblock %}
+
+{% block extrahead %}
+<style>
+  .hidden {
+    display: none;
+  }
+
+  .chevron {
+    transition: transform 0.2s ease;
+    display: inline-block;
+  }
+
+  .chevron.rotated {
+    transform: rotate(90deg);
+  }
+</style>
+{% endblock %}
+
+{% block content %}
+<div class="columns is-gapless is-mobile" style="height: 100vh; margin: 0;">
+  <div class="column is-one-third p-4 has-background-white" style="border-right: 1px solid #ccc; overflow-y: auto;">
+    <div id="file-tree">
+      {% include "scanpipe/panels/file_tree_panel.html" with children=children path=path %}
+    </div>
+  </div>
+
+  <div class="column p-4 has-background-white" style="overflow-y: auto;">
+    <div id="right-pane">
+    </div>
+  </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script>
+document.addEventListener("click", async function (e) {
+  const chevron = e.target.closest("[data-chevron]");
+  if (chevron) {
+    const folderNode = chevron.closest("[data-folder]");
+    const targetId = folderNode.dataset.target;
+    const url = folderNode.dataset.url;
+    const icon = chevron.querySelector("i");
+    const target = document.getElementById("dir-" + targetId);
+
+    if (target.dataset.loaded === "true") {
+      target.classList.toggle("hidden");
+      
+    } else {
+      target.classList.remove("hidden");
+      const response = await fetch(url + "&tree=true");
+      target.innerHTML = await response.text();
+      target.dataset.loaded = "true";
+
+      htmx.process(target);
+    }
+
+    chevron.classList.toggle("rotated");
+
+    e.stopPropagation();
+    return;
+  }
+});
+</script>
+{% endblock %}

scanpipe/tests/test_views.py

@@ -1569,3 +1569,35 @@ def test_project_codebase_resources_export_json(self):
 
         for field in expected_fields:
             self.assertIn(field, json_data[0])
+
+    def test_file_tree_base_url_lists_top_level_nodes(self):
+        make_resource_file(self.project1, path="child1.txt")
+        make_resource_file(self.project1, path="dir1")
+
+        url = reverse("file_tree", kwargs={"slug": self.project1.slug})
+        response = self.client.get(url)
+        children = response.context[-1]["children"]
+
+        child1 = children[0]
+        dir1 = children[1]
+
+        self.assertEqual(child1.path, "child1.txt")
+        self.assertEqual(dir1.path, "dir1")
+
+    def test_file_tree_nested_url_lists_only_children_of_given_path(self):
+        make_resource_file(self.project1, path="parent/child1.txt")
+        make_resource_file(self.project1, path="parent/dir1")
+        make_resource_file(self.project1, path="parent/dir1/child2.txt")
+
+        url = reverse("file_tree", kwargs={"slug": self.project1.slug})
+        response = self.client.get(url + "?path=parent&tree=true")
+        children = response.context["children"]
+
+        child1 = children[0]
+        dir1 = children[1]
+
+        self.assertEqual(child1.path, "parent/child1.txt")
+        self.assertEqual(dir1.path, "parent/dir1")
+
+        self.assertFalse(child1.has_children)
+        self.assertTrue(dir1.has_children)

scanpipe/urls.py

@@ -241,5 +241,10 @@
         views.LicenseListView.as_view(),
         name="license_list",
     ),
+    path(
+        "project/<slug:slug>/codebase_tree/",
+        views.CodebaseResourceTreeView.as_view(),
+        name="file_tree",
+    ),
     path("monitor/", include("django_rq.urls")),
 ]

scanpipe/views.py

@@ -37,6 +37,8 @@
 from django.core.exceptions import ValidationError
 from django.core.files.storage.filesystem import FileSystemStorage
 from django.core.serializers.json import DjangoJSONEncoder
+from django.db.models import Exists
+from django.db.models import OuterRef
 from django.db.models import Prefetch
 from django.db.models.manager import Manager
 from django.http import FileResponse
@@ -2566,3 +2568,35 @@ def get_node(self, package):
         if children:
             node["children"] = children
         return node
+
+
+class CodebaseResourceTreeView(ConditionalLoginRequired, generic.DetailView):
+    template_name = "scanpipe/resource_tree.html"
+
+    def get(self, request, *args, **kwargs):
+        slug = self.kwargs.get("slug")
+        project = get_object_or_404(Project, slug=slug)
+        path = request.GET.get("path", None)
+
+        base_qs = (
+            CodebaseResource.objects.filter(project=project, parent_path=path)
+            .only("path", "name", "type")
+            .order_by("path")
+        )
+
+        subdirs = CodebaseResource.objects.filter(
+            project=project,
+            parent_path=OuterRef("path"),
+        )
+
+        children = base_qs.annotate(has_children=Exists(subdirs))
+
+        context = {
+            "project": project,
+            "path": path,
+            "children": children,
+        }
+
+        if request.GET.get("tree") == "true":
+            return render(request, "scanpipe/panels/file_tree_panel.html", context)
+        return render(request, self.template_name, context)