Improve Project list page navigation #1200 (#1505)

Signed-off-by: tdruez <tdruez@nexb.com>

Author: tdruez

CHANGELOG.rst

@@ -1,7 +1,16 @@
 Changelog
 =========
 
-v34.9.3 (unreleased)
+v34.9.4 (unreleased)
+--------------------
+
+- Improve Project list page navigation.
+  A top previous/next page navigation was added in the header for consistency with other
+  list views.
+  Any paginated view can now be navigated using the left/right keyboard keys.
+  https://github.com/aboutcode-org/scancode.io/issues/1465
+
+v34.9.3 (2024-12-31)
 --------------------
 
 - Refine the available settings for RQ_QUEUES:

scancodeio/static/main.js

@@ -317,6 +317,44 @@ function displayFormUploadProgress($form, $progress, $form_errors, update_title=
   xhr.send(new FormData($form));
 }
 
+// Navigation
+
+class PaginationNavigator {
+  constructor(containerSelector) {
+    this.container = document.querySelector(containerSelector);
+
+    // Ensure the container exists before attaching listeners
+    if (!this.container) {
+      console.warn(`PaginationNavigator: No container found for selector "${containerSelector}"`);
+      return;
+    }
+
+    this.previousPageLink = this.container.querySelector("a.previous-page");
+    this.nextPageLink = this.container.querySelector("a.next-page");
+
+    this.attachKeyListener();
+  }
+
+  anyInputHasFocus() {
+    // Do not enable the navigation if an <input> or <textarea> currently has the focus
+    return document.querySelector("input:focus, textarea:focus") !== null;
+  }
+
+  attachKeyListener() {
+    document.addEventListener("keydown", (e) => {
+      if (e.keyCode === 37 && !this.anyInputHasFocus() && this.previousPageLink) {
+        // Left Arrow key for previous page
+        e.preventDefault();
+        window.location.href = this.previousPageLink.href;
+      } else if (e.keyCode === 39 && !this.anyInputHasFocus() && this.nextPageLink) {
+        // Right Arrow key for next page
+        e.preventDefault();
+        window.location.href = this.nextPageLink.href;
+      }
+    });
+  }
+}
+
 document.addEventListener('DOMContentLoaded', function () {
 
   setupOpenModalButtons();
@@ -327,6 +365,11 @@ document.addEventListener('DOMContentLoaded', function () {
   setupHighlightControls();
   setupSelectCheckbox();
 
+  const paginationContainer = document.querySelector("#pagination-header");
+  if (paginationContainer) {
+    new PaginationNavigator("#pagination-header");
+  }
+
   // Close modals and dropdowns on pressing "escape" key
   document.addEventListener('keydown', function (event) {
     var e = event || window.event;

scanpipe/templates/scanpipe/base.html

@@ -56,7 +56,7 @@
       .nowrap {white-space: nowrap;}
       #content-header input[name="search"] {width: 225px;}
       button.as-link {height: auto; line-height: initial; font-size: inherit;}
-      .button.is-smaller {font-size: .90rem;}
+      .button.is-smaller, .input.is-smaller {font-size: .90rem;}
       .file.is-boxed.has-name .file-cta {border-width: medium; border-style: dashed;}
       progress.file-upload::before {content: 'Files upload: 'attr(value)'%'; position: absolute; top: -14%; left: 43%; color: black; font-weight: 400;}
       .is-clipped-list ul {--snippet-spacing: 0.95rem; max-height: calc(8 * var(--snippet-spacing)); overflow: hidden;}

scanpipe/templates/scanpipe/dropdowns/filter_dropdown.html

@@ -1,6 +1,11 @@
 <div class="dropdown is-right is-hoverable">
   <div class="dropdown-trigger">
-    <button class="button" aria-haspopup="true">
+    <button class="button is-smaller" aria-haspopup="true">
+      {% if icon_class %}
+        <span class="icon has-text-grey">
+          <i class="{{ icon_class }}"></i>
+        </span>
+      {% endif %}
       <span>{{ filter_form_field.label }}</span>
       <span class="icon is-small">
         <i class="fa-solid fa-angle-down" aria-hidden="true"></i>

scanpipe/templates/scanpipe/dropdowns/project_actions_dropdown.html

@@ -1,6 +1,9 @@
 <div id="list-actions-dropdown" class="dropdown is-right is-hoverable is-disabled">
   <div class="dropdown-trigger">
-    <button class="button" aria-haspopup="true" disabled>
+    <button class="button is-smaller" aria-haspopup="true" disabled>
+      <span class="icon has-text-grey">
+        <i class="fa-solid fa-wrench"></i>
+      </span>
       <span>Actions</span>
       <span class="icon is-small">
         <i class="fa-solid fa-angle-down" aria-hidden="true"></i>

scanpipe/templates/scanpipe/includes/pagination_header.html

@@ -1,19 +1,21 @@
 {% load humanize %}
-<div class="is-flex is-justify-content-space-between">
-  <div>
-    {% block paginator_count %}
-      {{ paginator.count|intcomma }} results
-    {% endblock %}
-  </div>
+<div id="pagination-header" class="is-flex is-justify-content-space-between">
+  {% if not hide_results_count %}
+    <div>
+      {% block paginator_count %}
+        {{ paginator.count|intcomma }} results
+      {% endblock %}
+    </div>
+  {% endif %}
   <div>
     {% if page_obj.has_previous %}
-      <a href="?page={{ page_obj.previous_page_number }}{% if url_params_without_page %}&{{ url_params_without_page }}{% endif %}">&laquo;</a>
+      <a class="previous-page" href="?page={{ page_obj.previous_page_number }}{% if url_params_without_page %}&{{ url_params_without_page }}{% endif %}">&laquo;</a>
     {% else %}
       <span>&laquo;</span>
     {% endif %}
     Page {{ page_obj.number|intcomma }} of {{ page_obj.paginator.num_pages|intcomma }}
     {% if page_obj.has_next %}
-      <a href="?page={{ page_obj.next_page_number }}{% if url_params_without_page %}&{{ url_params_without_page }}{% endif %}">&raquo;</a>
+      <a class="next-page" href="?page={{ page_obj.next_page_number }}{% if url_params_without_page %}&{{ url_params_without_page }}{% endif %}">&raquo;</a>
     {% else %}
       <span>&raquo;</span>
     {% endif %}

scanpipe/templates/scanpipe/project_list.html

@@ -29,17 +29,20 @@
             </a>
           {% endif %}
         </div>
-        <a href="{% url 'project_add' %}" class="button is-smaller is-link">New Project</a>
+        <div class="has-text-right">
+          <a href="{% url 'project_add' %}" class="button is-smaller is-link">New Project</a>
+          {% include 'scanpipe/includes/pagination_header.html' with hide_results_count=True %}
+        </div>
       </div>
 
       <div class="is-flex mb-3">
         <div class="is-flex-grow-1 mr-2">
-          {% include 'scanpipe/includes/search_field.html' with hide_help=True %}
+          {% include 'scanpipe/includes/search_field.html' with extra_class="is-smaller" hide_help=True %}
         </div>
         <div>
-          {% include 'scanpipe/dropdowns/filter_dropdown.html' with filter_form_field=filter.form.pipeline only %}
-          {% include 'scanpipe/dropdowns/filter_dropdown.html' with filter_form_field=filter.form.status only %}
-          {% include 'scanpipe/dropdowns/filter_dropdown.html' with filter_form_field=filter.form.sort only %}
+          {% include 'scanpipe/dropdowns/filter_dropdown.html' with filter_form_field=filter.form.pipeline icon_class='fa-solid fa-filter' only %}
+          {% include 'scanpipe/dropdowns/filter_dropdown.html' with filter_form_field=filter.form.status icon_class='fa-solid fa-filter' only %}
+          {% include 'scanpipe/dropdowns/filter_dropdown.html' with filter_form_field=filter.form.sort icon_class='fa-solid fa-sort' only %}
           {% include 'scanpipe/dropdowns/project_actions_dropdown.html' %}
         </div>
       </div>

scanpipe/tests/test_views.py

@@ -135,8 +135,8 @@ def test_scanpipe_views_project_list_state_of_filters_in_search_form(self):
         response = self.client.get(url, data=data)
 
         expected = (
-            '<input class="input " type="search" placeholder="Search projects" '
-            'name="search" value="query">'
+            '<input class="input is-smaller" type="search" '
+            'placeholder="Search projects" name="search" value="query">'
         )
         self.assertContains(response, expected, html=True)