Display the list of fields for the advanced search syntax #1164 (#1167)

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

CHANGELOG.rst

@@ -4,8 +4,12 @@ Changelog
 v34.4.0 (unreleased)
 --------------------
 
+- Display the list of fields available for the advanced search syntax in the modal UI.
+  https://github.com/nexB/scancode.io/issues/1164
+
 - Add support for CycloneDX 1.6 outputs and inputs.
   Also, the CycloneDX outputs can be downloaded as 1.6, 1.5, and 1.4 spec versions.
+  https://github.com/nexB/scancode.io/pull/1165
 
 v34.3.0 (2024-04-10)
 --------------------

scanpipe/templates/scanpipe/modals/search_syntax_modal.html

@@ -2,46 +2,67 @@
   <div class="modal-background"></div>
   <div class="modal-card">
     <header class="modal-card-head">
-      <p class="modal-card-title">Search syntax</p>
+      <p class="modal-card-title">Search {{ filter.verbose_name_plural }}</p>
       <button class="delete" aria-label="close"></button>
     </header>
-    <section class="modal-card-body px-2">
+    <div class="modal-card-body p-2 pb-4">
       <div class="content">
-        <ul class="mt-0">
-          <li>
-            <strong>Single Term:</strong> Enter a single word to search for exact matches.<br>
-            Example: <code>file.txt</code>
-          </li>
-          <li>
-            <strong>Quoted Phrases:</strong> Use double quotes to search for exact phrases.<br>
-            Example: <code>"name version"</code>
-          </li>
-          <li>
-            <strong>Field Searches:</strong> Specify fields to narrow down your search.<br>
-            Use <code>field_name:</code> followed by your search term.<br>
-            Example: <code>name:file.txt</code></li>
-          <li>
-            <strong>Negation:</strong> Use a hyphen (-) before a field name to exclude results.<br>
-            Example: <code>-name:file.txt</code></li>
-          <li>
-            <strong>Lookup Types:</strong> Use lookup types to perform specific searches.
-            <ul>
-              <li><code>=</code>: Exact match</li>
-              <li><code>^</code>: Starts with</li>
-              <li><code>$</code>: Ends with</li>
-              <li><code>~</code>: Contains</li>
-              <li><code>&gt;</code>: Greater than</li>
-              <li><code>&lt;</code>: Less than</li>
-            </ul>
-            Example: <code>path^:dir1</code>
-          </li>
-          <li>
-            <strong>Multiple queries</strong> are combined with the <code>AND</code> operator.<br>
-            Example: <code>name:file.txt status:scanned</code>
-          </li>
-        </ul>
+        <div class="tabs is-boxed mb-4">
+          <ul class="m-0">
+            <li class="is-active">
+              <a data-target="tab-syntax" >Syntax</a>
+            </li>
+            <li>
+              <a data-target="tab-fields">Fields</a>
+            </li>
+          </ul>
+        </div>
+        <section id="tab-syntax" class="tab-content is-active">
+          <ul class="mt-0">
+            <li>
+              <strong>Single Term:</strong> Enter a single word to search for exact matches.<br>
+              Example: <code>file.txt</code>
+            </li>
+            <li>
+              <strong>Quoted Phrases:</strong> Use double quotes to search for exact phrases.<br>
+              Example: <code>"name version"</code>
+            </li>
+            <li>
+              <strong>Field Searches:</strong> Specify fields to narrow down your search.<br>
+              Use <code>field_name:</code> followed by your search term.<br>
+              Example: <code>name:file.txt</code></li>
+            <li>
+              <strong>Negation:</strong> Use a hyphen (-) before a field name to exclude results.<br>
+              Example: <code>-name:file.txt</code></li>
+            <li>
+              <strong>Lookup Types:</strong> Use lookup types to perform specific searches.
+              <ul>
+                <li><code>=</code>: Exact match</li>
+                <li><code>^</code>: Starts with</li>
+                <li><code>$</code>: Ends with</li>
+                <li><code>~</code>: Contains</li>
+                <li><code>&gt;</code>: Greater than</li>
+                <li><code>&lt;</code>: Less than</li>
+              </ul>
+              Example: <code>path^:dir1</code>
+            </li>
+            <li>
+              <strong>Multiple queries</strong> are combined with the <code>AND</code> operator.<br>
+              Example: <code>name:file.txt status:scanned</code>
+            </li>
+          </ul>
+        </section>
+        <section id="tab-fields" class="tab-content">
+          <ul style="columns: 2;-webkit-columns: 2;-moz-columns: 2;">
+            {% for field_name in searchable_fields %}
+              <li>
+                <code>{{ field_name }}</code>
+              </li>
+            {% endfor %}
+          </ul>
+        </section>
       </div>
-    </section>
+    </div>
     <footer class="modal-card-foot is-flex is-justify-content-space-between">
       <button class="button">Close</button>
     </footer>

scanpipe/views.py

@@ -497,6 +497,14 @@ def get_context_data(self, **kwargs):
         query_dict.pop(PAGE_VAR, None)
         context["url_params_without_page"] = query_dict.urlencode()
 
+        context["searchable_fields"] = sorted(
+            [
+                field.name
+                for field in self.model._meta.get_fields()
+                if not field.is_relation
+            ]
+        )
+
         return context