Toggleable compact view for suggestions lists (#848)

* feat: optional compact view for suggestions lists
* feat: status change in compact view
* feat: Implement compact mode for references & improve styling

Author: florentc

src/shared/templates/base.html

@@ -90,8 +90,8 @@ <h1>
     {% block workflow %}
     <nav id="menu-bar">
       <ul class="row gap">
-        <li class="row gap-small centered"><i class="icon-bin"></i><a href="{% url 'webview:suggestion:dismissed_suggestions' %}">Dismissed suggestions</a></li>
-        <li class="row gap-small centered"><i class="icon-inbox"></i><a href="{% url 'webview:suggestion:untriaged_suggestions' %}">Untriaged suggestions</a></li>
+        <li class="row gap-small centered"><i class="icon-bin"></i><a href="{% url 'webview:suggestion:dismissed_suggestions' %}?compact">Dismissed suggestions</a></li>
+        <li class="row gap-small centered"><i class="icon-inbox"></i><a href="{% url 'webview:suggestion:untriaged_suggestions' %}?compact">Untriaged suggestions</a></li>
         <li class="row gap-small centered"><i class="icon-draft"></i><a href="{% url 'webview:suggestion:accepted_suggestions' %}">Accepted suggestions</a></li>
         <li class="row gap-small centered"><i class="icon-github"></i><a href="{% url 'webview:issue_list' %}">Published issues</a></li>
       </ul>
@@ -105,7 +105,7 @@ <h1>
     {% endblock layout %}
 
     {% if is_paginated %}
-      {% include "components/pagination.html" %}
+      {% include "components/pagination.html" with is_compact=is_compact %}
     {% endif %}
 
     <footer>

src/webview/static/colors.css

@@ -12,7 +12,4 @@
   --light-green: #dbfcdb;
   --light-yellow: #fcfaba;
   --light-gray: #eee;
-
-  --foreground: black;
-  --background: white;
 }

src/webview/static/utility.css

@@ -24,24 +24,6 @@
   margin: 1em 0;
 }
 
-.small {
-  font-size: 0.75rem;
-}
-
-.tag {
-  border: solid 2px var(--background);
-  border-radius: 0.4em;
-  padding: 0.2rem 0.4rem;
-  outline-width: 2px;
-  word-break: normal;
-  display: inline-block;
-}
-
-.fill-gray {
-  color: var(--background);
-  background-color: var(--gray);
-}
-
 /* Buttons
  *
  * .btn - Base button style to be used on every standard button
@@ -110,6 +92,27 @@
   outline-style: solid;
 }
 
+/* Tags
+ *
+ * .tag - Base tag style to be used on every tag
+ * .tag-gray - Gray tag variant
+ *
+ * Usage: Combine .tag with one of the color variants
+ * Example: <span class="tag tag-gray">Keyword</button>
+ */
+
+.tag {
+  border-radius: 1000px;
+  padding: 0em 0.4em;
+  word-break: normal;
+}
+
+.tag-gray {
+  color: black;
+  border: 1px solid var(--gray);
+  background-color: var(--light-gray);
+}
+
 /* Titles
  *
  * .page-title - Only for the main title of a page
@@ -137,6 +140,7 @@
  * .condensed - Apply condensed font
  * .uppercase - Force uppercase
  * .dimmed - Dimmed gray text color
+ * .no-line-breaks - Prevent line breaks
  */
 
 .bold {
@@ -159,6 +163,10 @@
   color: var(--gray);
 }
 
+.no-line-breaks {
+  white-space: nowrap;
+}
+
 /* Layout
  *
  * Layout utilities using flexbox. Start with a required container type,
@@ -183,12 +191,17 @@
  * .gap-small - Small gap between items
  * .dividers - Display a separation line between items (handles gaps, don't use .gap or .gap-small)
  *
+ * Horizontal separator line:
+ * .divider - On an <hr> element: display a horizontal line to separate content.
+ *            To be used in a column + (small-)gap container.
+ *
  * Sizing:
  * .full-width - Force to use all available space (width: 100%)
  * .grow - Make an item grow in a container
  * .spread - Force items to be spread across available space
  *           For instance 2 elements on a .row .spread .full-width will be respectively on the far left and far right.
  * .wrap - Allow items to wrap for responsivity. This is how responsivity is to be implemented rather than through breakpoints.
+ *
  */
 
 .row {
@@ -234,6 +247,10 @@
   width: 100%;
 }
 
+.justify-right {
+  justify-content: flex-end;
+}
+
 .spread {
   justify-content: space-between;
 }
@@ -270,6 +287,13 @@
   border-bottom: none;
 }
 
+.divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--gray);
+  border: none;
+}
+
 /* Size */
 
 .w-12 {
@@ -288,6 +312,7 @@
  *
  * .rounded-box - Bordered container with padding and rounded corners.
  *                Includes overflow: auto for locally scrollable content.
+ * .rounded-box-compact - Same with small padding (same as buttons) to be used for inline boxes next to buttons for instance.
  */
 
 .rounded-box {
@@ -297,6 +322,13 @@
   overflow: auto;
 }
 
+.rounded-box-compact {
+  border: 1px solid var(--gray);
+  padding: 0.3em;
+  border-radius: 0.4em;
+  overflow: auto;
+}
+
 /* Toggle box
  *
  * Big toggler element with visual state indicators:

src/webview/suggestions/context/types.py

@@ -40,6 +40,7 @@ class SuggestionStubContext:
     issue_link: str | None
     undo_status_target: str | None  # FIXME(@florentc): change to the real enum type
     show_affected_product: bool = False
+    is_compact: bool = False
 
 
 # Maintainers
@@ -88,9 +89,11 @@ def __init__(
         self,
         suggestion: CVEDerivationClusterProposal,
         can_edit: bool,
+        is_compact: bool,
     ) -> None:
         self.show_status: bool = True
         self.can_edit: bool = can_edit
+        self.is_compact: bool = is_compact
         self.suggestion: CVEDerivationClusterProposal = suggestion
         self.suggestion_stub_context: SuggestionStubContext | None = None
         self.update_package_list_context(can_edit=can_edit)
@@ -172,6 +175,12 @@ def update_maintainer_list_context(
             can_edit=can_edit,
             suggestion_id=self.suggestion.pk,
             # FIXME(@fricklerhandwerk): It's really opaque what this is for.
+            # NOTE(@florentc): This is simply the context, meaning the data
+            # necessary to render the template, for the "add maintainer"
+            # widget. This follows the xxxxxx_context naming convention. The
+            # widget requires the suggestion id to point to the right action
+            # endpoint, and the optional error message to render next to it for
+            # feedback.
             maintainer_add_context=MaintainerAddContext(
                 self.suggestion.pk, maintainer_add_error_message
             ),

src/webview/suggestions/views/base.py

@@ -21,10 +21,12 @@ def fetch_suggestion(suggestion_id: int) -> CVEDerivationClusterProposal:
 def get_suggestion_context(
     suggestion: CVEDerivationClusterProposal,
     can_edit: bool,
+    is_compact: bool = False,
 ) -> SuggestionContext:
     return SuggestionContext(
         suggestion=suggestion,
         can_edit=can_edit,
+        is_compact=is_compact,
     )
 
 

src/webview/suggestions/views/lists.py

@@ -23,6 +23,15 @@ class SuggestionListView(ListView, ABC):
     status_filter: CVEDerivationClusterProposal.Status | None = None
     package_filter: str | None = None  # To be defined in concrete classes
 
+    @property
+    def is_compact(self) -> bool:
+        """Whether to show compact suggestions in the list"""
+        compact_param = self.request.GET.get("compact")
+        if compact_param is not None:
+            return compact_param.lower() not in ("false", "0", "no", "off")
+        else:
+            return False
+
     def get_queryset(self) -> QuerySet[CVEDerivationClusterProposal]:
         self.package_filter = self.kwargs.get("package_name")
         if self.status_filter is None:
@@ -63,9 +72,12 @@ def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
         # Convert suggestions to SuggestionContext objects for the current page
         suggestion_contexts = []
         can_edit = can_edit_suggestion(self.request.user)
+        is_compact = self.is_compact
         # FIXME(@fricklerhandwerk): This is very slow (scales with number of events in the activity log), it should batch all related queries and do the wiring in Python.
         for suggestion in page_obj.object_list:
-            suggestion_context = get_suggestion_context(suggestion, can_edit=can_edit)
+            suggestion_context = get_suggestion_context(
+                suggestion, can_edit=can_edit, is_compact=is_compact
+            )
             suggestion_context.show_status = (
                 self.status_filter
                 is None  # We don't show status in lists already filtered by status
@@ -78,6 +90,7 @@ def get_context_data(self, **kwargs: Any) -> dict[str, Any]:
                 "page_obj": page_obj,
                 "status_filter": self.status_filter,
                 "package_filter": self.package_filter,
+                "is_compact": self.is_compact,
                 "adjusted_elided_page_range": paginator.get_elided_page_range(
                     page_obj.number
                 ),

src/webview/suggestions/views/status.py

@@ -33,17 +33,22 @@ def post(self, request: HttpRequest, suggestion_id: int) -> HttpResponse:
         if not request.user or not can_edit:
             return HttpResponseForbidden()
 
-        # Get suggestion context
-        suggestion = fetch_suggestion(suggestion_id)
-        suggestion_context = get_suggestion_context(suggestion, can_edit=can_edit)
-
         # Get form data
         new_status = request.POST.get("new_status")
         new_comment = request.POST.get("comment", "").strip()
+        is_compact = (
+            request.POST.get("is_compact") == "true"
+        )  # To maintain compact/detailed during live reload
         undo_status_change = request.POST.get(
             "undo_status_change"
         )  # This is set if the status change comes from clicking "Undo"
 
+        # Get suggestion context
+        suggestion = fetch_suggestion(suggestion_id)
+        suggestion_context = get_suggestion_context(
+            suggestion, can_edit=can_edit, is_compact=is_compact
+        )
+
         # Validate status change
         if not new_status:
             return self._handle_error(request, suggestion_context, "Missing new status")
@@ -130,6 +135,7 @@ def post(self, request: HttpRequest, suggestion_id: int) -> HttpResponse:
                     suggestion,
                     issue_link=github_issue_link,
                     undo_status_target=undo_status_target,
+                    is_compact=is_compact,
                 )
         elif new_status == "published":
             # NOTE(@florentc): This treats the case where we are in detail view

src/webview/templates/components/affected_products.html

@@ -7,7 +7,7 @@
       <div>
         {{ package_name }}
       </div>
-      <ul class="w-12">
+      <ul class="{% if is_compact %}row gap-small wrap{% else %}w-12{% endif %}">
         {% for status, vc_str in ap.version_constraints %}
           <li>
             <span

src/webview/templates/components/cve_references.html

@@ -1,20 +1,18 @@
 {% load viewutils %}
 
-<div class="rounded-box">
-  <h2 class="heading dimmed">References</h2>
-  <ul class="column gap">
+<div class="{% if not is_compact %}rounded-box{% endif %}">
+  {% if not is_compact %}<h2 class="heading dimmed">References</h2>{% endif %}
+  <ul class="column {% if is_compact %}gap-small{% else %}gap{% endif %}">
   {% for ref in references %}
-    <li class="row baseline gap">
-      <div>
+    <li class="row baseline gap-small wrap">
       {% if ref.name %}
         <a href="{{ref.url}}" target="_blank">{{ref.name}}</a>
       {% else %}
-        <a href="{{ref.url}}" target="_blank">{{ref.url}}</a>
+        {{ref.url|urlizetrunc:80}}
       {% endif %}
-        {% for tag in ref.tags %}
-          <span class="tag fill-gray">{{tag.value}}</span>
-        {% endfor %}
-      </div>
+      {% for tag in ref.tags %}
+        <span class="tag tag-gray">{{tag.value}}</span>
+      {% endfor %}
     </li>
   {% endfor %}
   </ul>

src/webview/templates/components/pagination.html

@@ -4,7 +4,7 @@
       {% if page_number == paginator.ELLIPSIS %}
       {{page_number}}
       {% else %}
-      <a href="{{request.path}}?page={{page_number}}" class="{% if page_number == page_obj.number %}bold{% endif %}">
+      <a href="{{request.path}}?page={{page_number}}{% if is_compact %}&compact{% endif %}" class="{% if page_number == page_obj.number %}bold{% endif %}">
         {{page_number}}
       </a>
       {% endif %}