Load the resource details in the tree browser view

scancodeio/static/main.css

@@ -530,8 +530,6 @@ body.full-screen #resource-viewer .message-header {
   flex: 1;
   min-width: 0;
   transition: opacity 0.2s ease;
-  display: flex;
-  flex-direction: column;
   height: 100%;
 }
 #resource-tree-container .right-pane .table-scroll-area {

scanpipe/templates/scanpipe/base_htmx.html

@@ -0,0 +1,5 @@
+{% block partial-content %}
+{% endblock %}
+
+{% block scripts %}
+{% endblock %}

scanpipe/templates/scanpipe/dependency_detail.html

@@ -8,6 +8,6 @@
     {% include 'scanpipe/includes/navbar_header.html' %}
     <div class="mx-5 mb-2">{% include 'scanpipe/includes/messages.html' %}</div>
     {% include 'scanpipe/includes/breadcrumb_detail_view.html' with object_title=object.package_url url_name="project_dependencies" %}
-    {% include 'scanpipe/tabset/tabset.html' %}
+    <div class="mx-5">{% include 'scanpipe/tabset/tabset.html' %}</div>
   </div>
 {% endblock %}

scanpipe/templates/scanpipe/includes/project_summary_level.html

@@ -70,7 +70,7 @@
             {{ project.resource_count|intcomma }}
           </a>
           {% if project.resource_count > 1 %}
-            <a href="{% url 'codebase_resource_tree' project.slug %}" class="ml-2">
+            <a href="{% url 'project_resource_tree' project.slug %}" class="ml-2">
               <span class="icon">
                 <i class="fa-solid fa-folder-tree is-size-6"></i>
               </span>

scanpipe/templates/scanpipe/license_detail.html

@@ -16,6 +16,6 @@
         </ul>
       </nav>
     </section>
-    {% include 'scanpipe/tabset/tabset.html' %}
+    <div class="mx-5">{% include 'scanpipe/tabset/tabset.html' %}</div>
   </div>
 {% endblock %}

scanpipe/templates/scanpipe/license_detection_detail.html

@@ -8,6 +8,6 @@
     {% include 'scanpipe/includes/navbar_header.html' %}
     <div class="mx-5 mb-2">{% include 'scanpipe/includes/messages.html' %}</div>
     {% include 'scanpipe/includes/breadcrumb_detail_view.html' with object_title=object.identifier url_name="project_licenses" %}
-    {% include 'scanpipe/tabset/tabset.html' %}
+    <div class="mx-5">{% include 'scanpipe/tabset/tabset.html' %}</div>
   </div>
 {% endblock %}

scanpipe/templates/scanpipe/package_detail.html

@@ -8,6 +8,6 @@
     {% include 'scanpipe/includes/navbar_header.html' %}
     <div class="mx-5 mb-2">{% include 'scanpipe/includes/messages.html' %}</div>
     {% include 'scanpipe/includes/breadcrumb_detail_view.html' with object_title=object.package_url url_name="project_packages" %}
-    {% include 'scanpipe/tabset/tabset.html' %}
+    <div class="mx-5">{% include 'scanpipe/tabset/tabset.html' %}</div>
   </div>
 {% endblock %}

scanpipe/templates/scanpipe/panels/project_codebase.html

@@ -21,7 +21,7 @@
         </span>
       {% endif %}
     </div>
-    <a href="{% url 'codebase_resource_tree' project.slug %}" class="ml-2 has-text-white has-text-decoration-none">
+    <a href="{% url 'project_resource_tree' project.slug %}" class="ml-2 has-text-white has-text-decoration-none">
       <i class="fa-solid fa-folder-tree mr-1"></i>Tree view
     </a>
   </div>

scanpipe/templates/scanpipe/resource_detail.html

@@ -1,20 +1,27 @@
-{% extends "scanpipe/base.html" %}
+{% extends request.htmx|yesno:"scanpipe/base_htmx.html,scanpipe/base.html" %}
 {% load static %}
 
 {% block title %}ScanCode.io: {{ project.name }} - {{ object.name }}{% endblock %}
 
+{% block extrahead %}
+  <script src="{% static 'ace-1.42.0.min.js' %}" crossorigin="anonymous"></script>
+  <script src="{% static 'ace-1.42.0-ext-searchbox.min.js' %}" crossorigin="anonymous"></script>
+{% endblock %}
+
 {% block content %}
   <div class="container is-max-widescreen">
     {% include 'scanpipe/includes/navbar_header.html' %}
     <div class="mx-5 mb-2">{% include 'scanpipe/includes/messages.html' %}</div>
     {% include 'scanpipe/includes/breadcrumb_detail_view.html' with template_title="scanpipe/includes/resource_path_links.html" url_name="project_resources" %}
-    {% include 'scanpipe/tabset/tabset.html' %}
+    <div class="mx-5">
+      {% block partial-content %}
+        {% include 'scanpipe/tabset/tabset.html' %}
+      {% endblock %}
+    </div>
   </div>
 {% endblock %}
 
 {% block scripts %}
-  <script src="{% static 'ace-1.42.0.min.js' %}" crossorigin="anonymous"></script>
-  <script src="{% static 'ace-1.42.0-ext-searchbox.min.js' %}" crossorigin="anonymous"></script>
   {{ detected_values|json_script:"detected_values" }}
   <script>
     let editor = ace.edit("editor", {
@@ -124,6 +131,5 @@
       let is_full_screen = body.classList.toggle("full-screen");
       editor.resize()
     });
-
   </script>
 {% endblock %}

scanpipe/templates/scanpipe/resource_list.html

@@ -17,7 +17,7 @@
   </div>
 
   <div id="resource-list" class="container is-fluid mb-3">
-    <a href="{% url 'codebase_resource_tree' project.slug %}" class="is-pulled-right">
+    <a href="{% url 'project_resource_tree' project.slug %}" class="is-pulled-right">
       <span class="icon">
         <i class="fa-solid fa-folder-tree"></i>
       </span>

scanpipe/templates/scanpipe/resource_tree.html

@@ -2,6 +2,11 @@
 {% load static humanize %}
 {% block title %}ScanCode.io: {{ project.name }} - Resources tree{% endblock %}
 
+{% block extrahead %}
+  <script src="{% static 'ace-1.42.0.min.js' %}" crossorigin="anonymous"></script>
+  <script src="{% static 'ace-1.42.0-ext-searchbox.min.js' %}" crossorigin="anonymous"></script>
+{% endblock %}
+
 {% block content %}
   <div id="content-header" class="container is-max-widescreen mb-3">
     {% include 'scanpipe/includes/navbar_header.html' %}
@@ -12,27 +17,27 @@
     </section>
   </div>
 
-<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 id="resource-tree">
-        {% include "scanpipe/panels/codebase_tree_panel.html" with children=children path=path %}
-      </div>
-    </div>
-    <div id="resizer" class="resizer"></div>
-    <div id="right-pane" class="right-pane px-2">
-      {% if path %}
-        <div
-          hx-get="{% url 'codebase_resource_table' project.slug %}?path={{ path }}"
-          hx-trigger="load"
-          hx-target="this">
+  <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 id="resource-tree">
+          {% include "scanpipe/tree/resource_left_pane_tree.html" with children=children path=path %}
         </div>
-      {% else %}
-        {% include "scanpipe/panels/resource_table_panel.html" %}
-      {% endif %}
+      </div>
+      <div id="resizer" class="resizer"></div>
+      <div id="right-pane" class="right-pane px-3">
+        {% if path %}
+          <div
+            hx-get="{% url 'project_resource_tree_table' project.slug %}?path={{ path }}"
+            hx-trigger="load"
+            hx-target="this">
+          </div>
+        {% else %}
+          {% include "scanpipe/tree/resource_right_pane_table.html" %}
+        {% endif %}
+      </div>
     </div>
   </div>
-</div>
 {% endblock %}
 
 {% block scripts %}

scanpipe/templates/scanpipe/tables/project_list_table.html

@@ -54,7 +54,7 @@
             {{ project.codebaseresources_count|intcomma }}
           </a>
           {% if project.codebaseresources_count > 1 %}
-            <a href="{% url 'codebase_resource_tree' project.slug %}">
+            <a href="{% url 'project_resource_tree' project.slug %}">
               <span class="icon">
                 <i class="fa-solid fa-folder-tree fa-sm"></i>
               </span>

scanpipe/templates/scanpipe/tabset/tabset.html

@@ -1,5 +1,5 @@
 {% load humanize %}
-<div class="tabs is-boxed mx-5 mb-3">
+<div class="tabs is-boxed mb-3">
   <ul>
     {% for tab_id, tab_data in tabset_data.items %}
       <li{% if forloop.first %} class="is-active"{% endif %}>
@@ -25,7 +25,7 @@
 
 {% for tab_id, tab_data in tabset_data.items %}
   {% if not tab_data.disabled %}
-    <section id="tab-{{ tab_id }}" class="tab-content mx-5 px-1 mb-3{% if forloop.first %} is-active{% endif %}">
+    <section id="tab-{{ tab_id }}" class="tab-content px-1 mb-3{% if forloop.first %} is-active{% endif %}">
       {% if tab_data.template %}
         {% include tab_data.template with tab_data=tab_data %}
       {% else %}

scanpipe/templates/scanpipe/panels/codebase_tree_panel.html → scanpipe/templates/scanpipe/tree/resource_left_pane_tree.html

@@ -2,17 +2,17 @@
   {% for node in children %}
     <li>
       {% if node.is_dir %}
-        <div class="tree-node is-flex is-align-items-center px-1" data-folder data-path="{{ node.path }}"{% if node.has_children %} data-target="{{ node.path|slugify }}" data-url="{% url 'codebase_resource_tree' slug=project.slug %}?path={{ node.path }}"{% endif %}>
+        <div class="tree-node is-flex is-align-items-center px-1" data-folder data-path="{{ node.path }}"{% if node.has_children %} data-target="{{ node.path|slugify }}" data-url="{% url 'project_resource_tree' slug=project.slug %}?path={{ node.path }}"{% endif %}>
           <span class="icon is-small chevron mr-1{% if not node.has_children %} is-invisible{% endif %} is-clickable is-flex is-align-items-center" data-chevron>
             <i class="fas fa-chevron-right"></i>
           </span>
           <span
             class="is-flex is-align-items-center folder-meta is-clickable"
             data-folder-click
             data-path="{{ node.path }}"
-            hx-get="{% url 'codebase_resource_table' project.slug %}?path={{ node.path }}"
+            hx-get="{% url 'project_resource_tree_table' project.slug %}?path={{ node.path }}"
             hx-target="#right-pane"
-            hx-push-url="{% url 'codebase_resource_tree' project.slug %}?path={{ node.path }}">
+            hx-push-url="{% url 'project_resource_tree' project.slug %}?path={{ node.path }}">
             <span class="icon is-small mr-2">
               <i class="fas fa-folder"></i>
             </span>
@@ -27,9 +27,9 @@
           class="tree-node-file is-flex is-align-items-center pl-5 is-clickable is-file"
           data-file
           data-path="{{ node.path }}"
-          hx-get="{% url 'codebase_resource_table' project.slug %}?path={{ node.path }}"
-          hx-target="#right-pane"
-          hx-push-url="{% url 'codebase_resource_tree' project.slug %}?path={{ node.path }}">
+          hx-get="{% url 'resource_detail' project.slug node.path %}"
+          hx-target="#right-pane-content"
+          hx-push-url="{% url 'project_resource_tree' project.slug %}?path={{ node.path }}">
           <span class="icon is-small mr-2">
             <i class="far fa-file"></i>
           </span>

scanpipe/templates/scanpipe/panels/resource_table_panel.html → scanpipe/templates/scanpipe/tree/resource_right_pane_table.html

@@ -1,23 +1,25 @@
 {% load humanize %}
-<div class="mb-4">
+<div id="right-pane-header" class="mb-4">
   <div class="has-text-weight-semibold is-flex is-align-items-center">
     {% if path_segments %}
       <span id="resource-path" class="has-text-weight-medium">
         {% spaceless %}
         {% for subpath, segment in path_segments %}
-          {% if not forloop.first %}<span class="mx-1">/</span>{% endif %}
+          {% if not forloop.first %}
+            <span class="mx-1">/</span>
+          {% endif %}
           {% if not forloop.last %}
             <a
-              href="{% url 'codebase_resource_tree' project.slug %}?path={{ subpath }}"
+              href="{% url 'project_resource_tree' project.slug %}?path={{ subpath }}"
               class="expand-in-tree"
               data-path="{{ subpath }}"
-              hx-get="{% url 'codebase_resource_table' project.slug %}?path={{ subpath }}"
+              hx-get="{% url 'project_resource_tree_table' project.slug %}?path={{ subpath }}"
               hx-target="#right-pane"
-              hx-push-url="{% url 'codebase_resource_tree' project.slug %}?path={{ subpath }}">
-              {{ segment }}
-            </a>
+              hx-push-url="{% url 'project_resource_tree' project.slug %}?path={{ subpath }}"
+            {# WARNING: spaceless is not working properly so keep the label without spaces #}
+            >{{ segment }}</a>
           {% else %}
-            <span>{{ segment }}</span>
+            <span class="has-text-weight-bold">{{ segment }}</span>
           {% endif %}
         {% endfor %}
         {% endspaceless %}
@@ -29,7 +31,7 @@
   </div>
 </div>
 
-<div class="table-scroll-area">
+<div id="right-pane-content" class="table-scroll-area">
   {% if resources %}
     <table class="table is-bordered is-hoverable is-fullwidth">
       <thead class="is-sticky">
@@ -46,9 +48,9 @@
             <tr
               class="expand-in-tree is-clickable"
               data-path="{{ parent_path }}"
-              hx-get="{% url 'codebase_resource_table' project.slug %}{% if parent_path %}?path={{ parent_path }}{% endif %}"
+              hx-get="{% url 'project_resource_tree_table' project.slug %}{% if parent_path %}?path={{ parent_path }}{% endif %}"
               hx-target="#right-pane"
-              hx-push-url="{% url 'codebase_resource_tree' project.slug %}{% if parent_path %}?path={{ parent_path }}{% endif %}">
+              hx-push-url="{% url 'project_resource_tree' project.slug %}{% if parent_path %}?path={{ parent_path }}{% endif %}">
               <td colspan="5">
                 <div class="is-flex is-align-items-center">
                   <span class="icon is-small mr-2">
@@ -73,15 +75,21 @@
                   {% if resource.is_dir %}
                     <a
                       class="expand-in-tree"
-                      href="{% url 'codebase_resource_tree' project.slug %}?path={{ resource.path }}"
+                      href="{% url 'project_resource_tree' project.slug %}?path={{ resource.path }}"
                       data-path="{{ resource.path }}"
-                      hx-get="{% url 'codebase_resource_table' project.slug %}?path={{ resource.path }}"
+                      hx-get="{% url 'project_resource_tree_table' project.slug %}?path={{ resource.path }}"
                       hx-target="#right-pane"
-                      hx-push-url="{% url 'codebase_resource_tree' project.slug %}?path={{ resource.path }}">
+                      hx-push-url="{% url 'project_resource_tree' project.slug %}?path={{ resource.path }}">
                       {{ resource.name }}
                     </a>
                   {% else %}
-                    <a href="{% url 'resource_detail' project.slug resource.path %}">{{ resource.name }}</a>
+                    <a
+                      href="{% url 'resource_detail' project.slug resource.path %}"
+                      hx-get="{% url 'resource_detail' project.slug resource.path %}"
+                      hx-target="#right-pane-content"
+                      hx-push-url="{% url 'project_resource_tree' project.slug %}?path={{ resource.path }}">
+                      {{ resource.name }}
+                    </a>
                   {% endif %}
                   {% if resource.tag %}
                     <span class="tag is-rounded ml-2">{{ resource.tag }}</span>
@@ -110,18 +118,18 @@
         {% if page_obj.has_previous %}
           <a
             class="pagination-previous"
-            hx-get="{% url 'codebase_resource_table' project.slug %}?path={{ path }}&page={{ page_obj.previous_page_number }}"
+            hx-get="{% url 'project_resource_tree_table' project.slug %}?path={{ path }}&page={{ page_obj.previous_page_number }}"
             hx-target="#right-pane"
-            hx-push-url="{% url 'codebase_resource_tree' project.slug %}?path={{ path }}&page={{ page_obj.previous_page_number }}">
+            hx-push-url="{% url 'project_resource_tree' project.slug %}?path={{ path }}&page={{ page_obj.previous_page_number }}">
             Previous
           </a>
         {% endif %}
         {% if page_obj.has_next %}
           <a
             class="pagination-next"
-            hx-get="{% url 'codebase_resource_table' project.slug %}?path={{ path }}&page={{ page_obj.next_page_number }}"
+            hx-get="{% url 'project_resource_tree_table' project.slug %}?path={{ path }}&page={{ page_obj.next_page_number }}"
             hx-target="#right-pane"
-            hx-push-url="{% url 'codebase_resource_tree' project.slug %}?path={{ path }}&page={{ page_obj.next_page_number }}">
+            hx-push-url="{% url 'project_resource_tree' project.slug %}?path={{ path }}&page={{ page_obj.next_page_number }}">
             Next page
           </a>
         {% endif %}