Add the django-htmx app to the stack (#1917)

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

Author: tdruez

pyproject.toml

@@ -44,6 +44,7 @@ dependencies = [
   "django-filter==25.1",
   "djangorestframework==3.16.1",
   "django-taggit==6.1.0",
+  "django-htmx==1.26.0",
   # Database
   "psycopg[binary]==3.2.10",
   # wait_for_database Django management command

scancodeio/settings.py

@@ -198,6 +198,7 @@
     "django_rq",
     "django_probes",
     "taggit",
+    "django_htmx",
 ]
 
 MIDDLEWARE = [
@@ -208,6 +209,7 @@
     "django.contrib.auth.middleware.AuthenticationMiddleware",
     "django.contrib.messages.middleware.MessageMiddleware",
     "django.middleware.clickjacking.XFrameOptionsMiddleware",
+    "django_htmx.middleware.HtmxMiddleware",
     "scancodeio.middleware.TimezoneMiddleware",
 ]
 

scancodeio/static/htmx-2.0.4.min.js

@@ -367,6 +367,21 @@ progress.file-upload::before {
 textarea.is-dynamic {
   min-height: 70px;
 }
+#project-list-header ul#id_is_archived {
+  display: inline-flex;
+}
+#project-list-header ul#id_is_archived li {
+  margin-right: 1rem;
+}
+#project-list-header ul#id_is_archived li a {
+  color: var(--bulma-grey);
+}
+#project-list-header ul#id_is_archived li a:hover {
+  text-decoration: underline;
+}
+#project-list-header ul#id_is_archived li a.is-active {
+  color: var(--bulma-text);
+}
 #project-extra-data figure.highlight {
   overflow-y: scroll;
 }
@@ -406,3 +421,139 @@ textarea.is-dynamic {
 #codebase-relation-list th#column-map_type {
   width: 145px;
 }
+#dependency-tree.tree {
+  line-height: 1.8rem;
+  --spacing : 2rem;
+}
+#dependency-tree.tree summary {
+  display: inline-block;
+}
+#dependency-tree.tree summary::before{
+  background-color: rgb(72, 199, 142);
+  background-image: url('{% static "iamkate-tree-views/expand-collapse.svg" %}');
+}
+#resource-viewer #editor {
+  min-height:730px;
+  border: var(--bulma-grey) 1px solid;
+}
+#resource-viewer .tag {
+  height: 1.5em;
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+}
+#resource-viewer .nav-button .button {
+  height: auto;
+  padding: 0 .25rem 0 .25rem;
+}
+#resource-viewer #detected-data-buttons {
+  background-color: var(--bulma-pre-background);
+  border-left: var(--bulma-grey) 1px solid;
+  border-right: var(--bulma-grey) 1px solid;
+}
+#resource-viewer #detected-data-buttons p.control {
+  border-right: var(--bulma-grey) 1px solid;
+}
+#resource-viewer .ace_tooltip .ace_icon {
+  display: none;
+}
+
+/* Full screen for #resource-viewer
+   Inspired by ace/demo/scrollable-page.html */
+body.full-screen {
+  overflow: hidden;
+  /* transform breaks position fixed */
+  transform: none !important;
+}
+body.full-screen #resource-viewer {
+  height: auto;
+  width: auto;
+  border: 0;
+  margin: 0;
+  position: fixed !important;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 100;
+}
+body.full-screen #resource-viewer .message-header {
+  border-radius: 0 !important;
+}
+
+#resource-tree-container .resizable-container {
+  height: calc(100vh - 140px);
+}
+#resource-tree-container .chevron {
+  transition: transform 0.2s ease;
+  display: inline-block;
+}
+#resource-tree-container .chevron.rotated {
+  transform: rotate(90deg);
+}
+#resource-tree-container .left-pane {
+  min-width: 0;
+  max-width: 100%;
+  border-right: 1px solid #ccc;
+  overflow-y: auto;
+  overflow-x: hidden;
+  flex-basis: 25%;
+  transition: opacity 0.2s ease;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+#resource-tree-container .left-pane.collapsed {
+  opacity: 0;
+  pointer-events: none;
+}
+#resource-tree-container .resizer {
+  width: 3px;
+  background: var(--bulma-border);
+  cursor: col-resize;
+  position: relative;
+  flex-shrink: 0;
+}
+#resource-tree-container .resizer:hover {
+  background: var(--bulma-border-hover);
+}
+#resource-tree-container .resizer::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0px;
+  transform: translateY(-50%);
+  width: 2px;
+  height: 30px;
+  background: #999;
+  border-radius: 2px;
+}
+#resource-tree-container .right-pane {
+  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 {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+#resource-tree-container .right-pane.collapsed {
+  opacity: 0;
+  pointer-events: none;
+}
+#resource-tree-container .right-pane a:hover {
+  text-decoration: underline;
+}
+#resource-tree-container .is-current, .is-current:hover {
+  background-color: var(--bulma-background-hover) !important;
+  border-radius: var(--bulma-radius);
+}
+#resource-tree-container .tree-node, .tree-node-file {
+  padding: .25rem 0 .25rem 0;
+}
+#resource-tree-container .tree-node:hover, .tree-node-file:hover {
+  background-color: var(--bulma-background);
+  border-radius: var(--bulma-radius);
+}

scancodeio/static/htmx-2.0.4.min.js.ABOUT

@@ -463,6 +463,14 @@ document.addEventListener('DOMContentLoaded', function () {
 
 });
 
+// HTMX
+
+document.body.addEventListener("htmx:afterSwap", function(evt) {
+  // Call the following functions after a HTMX swap is done.
+  setupTabs();
+  enableCopyToClipboard(".copy-to-clipboard");
+});
+
 // Toasts (requires bulma-toast.js)
 
 function displayPipelineStatusToast(run_status, pipeline_name, project_url) {

scancodeio/static/main.css

@@ -1,4 +1,5 @@
 {% load static %}
+{% load django_htmx %}
 <!DOCTYPE html>
 <html lang="en">
   <head>
@@ -11,14 +12,14 @@
     <link rel="stylesheet" href="{% static 'main.css' %}" crossorigin="anonymous">
     {% block extrahead %}{% endblock %}
   </head>
-  <body class="pb-5">
+  <body class="pb-5" hx-headers='{"x-csrftoken": "{{ csrf_token }}"}'>
     {% block content %}{% endblock %}
     {% include 'scanpipe/modals/search_syntax_modal.html' %}
     <script src="{% static 'main.js' %}" crossorigin="anonymous"></script>
     <script src="{% static 'fontawesome-6.7.2/all.min.js' %}" crossorigin="anonymous" defer></script>
     <script src="{% static 'highlight-10.6.0.min.js' %}" crossorigin="anonymous"></script>
     <script src="{% static 'bulma-toast-2.4.1.min.js' %}" crossorigin="anonymous" defer></script>
-    <script src="{% static 'htmx-2.0.4.min.js' %}" crossorigin="anonymous" defer></script>
+    {% htmx_script %}
     {% block scripts %}{% endblock %}
   </body>
 </html>

scancodeio/static/main.js

@@ -1,9 +1,9 @@
 {% if run.status == run.Status.RUNNING or run.status == run.Status.QUEUED %}
-  <span class="tag is-info is-hoverable"
-        hx-get="{% url 'run_status' run.uuid %}?current_status={{ run.status }}{% if display_current_step %}&display_current_step={{ display_current_step }}{% endif %}"
-        hx-trigger="load delay:10s"
-        hx-swap="outerHTML"
-  >
+  <span
+    class="tag is-info is-hoverable"
+    hx-get="{% url 'run_status' run.uuid %}?current_status={{ run.status }}{% if display_current_step %}&display_current_step={{ display_current_step }}{% endif %}"
+    hx-trigger="load delay:10s"
+    hx-swap="outerHTML">
     {% if run.status == run.Status.RUNNING %}
       <i class="fa-solid fa-spinner fa-pulse mr-1" aria-hidden="true"></i>Running
       {% if display_current_step and run.current_step %}

scanpipe/templates/scanpipe/base.html

@@ -4,10 +4,10 @@
     Removing steps may compromise data integrity. Use with caution.
   </div>
   {% include 'scanpipe/forms/form_errors.html' %}
-  <form hx-post="{% url 'project_run_step_selection' run.uuid %}"
-        hx-target="#run-step-selection-box"
-        hx-swap="outerHTML"
-  >{% csrf_token %}
+  <form
+    hx-post="{% url 'project_run_step_selection' run.uuid %}"
+    hx-target="#run-step-selection-box"
+    hx-swap="outerHTML">
     <div class="field">
       <label class="label">Select steps:</label>
       <div class="control">

scanpipe/templates/scanpipe/includes/run_status_tag.html

@@ -16,11 +16,12 @@
                   <span class="tag is-info">
                     <span class="has-text-weight-bold ml-1">{{ label.name }}</span>
                   </span>
-                  <a class="tag is-delete"
-                     hx-post="{% url 'project_delete_label' project.slug label.name %}"
-                     hx-target="#label-{{ label.slug }}"
-                     hx-swap="delete"
-                     hx-on::after-request="this.parentElement.parentElement.remove()"
+                  <a
+                    class="tag is-delete"
+                    hx-post="{% url 'project_delete_label' project.slug label.name %}"
+                    hx-target="#label-{{ label.slug }}"
+                    hx-swap="delete"
+                    hx-on::after-request="this.parentElement.parentElement.remove()"
                   >
                   </a>
                 </div>