feat #17666: Display icons for component priority

- Add 5 new svg (1 for each priority)
- Add trumping logic to select the svg based on the
 component priority
- Display the priority along with the remaining icons
 related to the component
- Add a test to validate this logic checking each boundary

Closes #17666

Co-authored-by: Dinis Sales <dinis.sales@tecnico.ulisboa.pt>

Author: Samuel-k276

weblate/static/priorities/dash.svg

@@ -47,6 +47,7 @@
 from weblate.utils.docs import get_doc_url
 from weblate.utils.hash import hash_to_checksum
 from weblate.utils.html import format_html_join_comma, list_to_tuples
+from weblate.utils.icons import load_icon
 from weblate.utils.markdown import render_markdown
 from weblate.utils.messages import get_message_kind as get_message_kind_impl
 from weblate.utils.random import get_random_identifier
@@ -1241,6 +1242,35 @@ def indicate_alerts(
     # GhostProjectLanguageStats and GhostCategoryLanguageStats as these would
     # be confusing (showing alert or admin icon on ghost containers).
 
+    priority_html = ""
+    if component and (priority := getattr(component, "priority", None)) is not None:
+        levels = (
+            (60, "double_arrow_up", "text-danger", gettext_lazy("Priority: Very high")),
+            (80, "single_arrow_up", "text-warning", gettext_lazy("Priority: High")),
+            (100, "dash", "text-info", gettext_lazy("Priority: Medium")),
+            (120, "single_arrow_down", "text-muted", gettext_lazy("Priority: Low")),
+        )
+
+        selected_svg = "double_arrow_down"
+        css_class = "text-secondary"
+        title_text = gettext_lazy("Priority: Very low")
+        for threshold, svg, css, title in levels:
+            if priority <= threshold:
+                selected_svg = svg
+                css_class = css
+                title_text = title
+                break
+
+        priority_html = format_html(
+            '<span class="state-icon {}" data-bs-toggle="tooltip" title="{}" alt="{}" style="margin: 0">{}</span>',
+            css_class,
+            title_text,
+            title_text,
+            mark_safe(  # noqa: S308
+                load_icon(f"priorities/{selected_svg}.svg", auto_prefix=False).decode()
+            ),
+        )
+
     icons = format_html_join(
         "\n",
         '{}<span class="state-icon {}" title="{}" alt="{}">{}</span>{}',
@@ -1276,7 +1306,7 @@ def indicate_alerts(
             component.license,
         )
 
-    return format_html("{}{}", icons, license_badge)
+    return format_html("{}{}{}", priority_html, icons, license_badge)
 
 
 @register.filter(is_safe=True)

weblate/static/priorities/double_arrow_down.svg

@@ -6,6 +6,9 @@
 
 from __future__ import annotations
 
+from unittest.mock import patch
+
+from django.template import Context
 from django.test import SimpleTestCase, TestCase
 from django.utils import timezone
 
@@ -16,6 +19,7 @@
 from weblate.trans.templatetags.translations import (
     format_translation,
     get_location_links,
+    indicate_alerts,
     naturaltime,
     translation_progress_render,
 )
@@ -35,6 +39,50 @@ def test_natural(self) -> None:
         self.assertIn('class="naturaltime"', result)
 
 
+class IndicateAlertsPriorityTest(SimpleTestCase):
+    def test_priority_icons(self) -> None:
+        project = Project(slug="p", name="p")
+        context = Context({})
+
+        cases = (
+            (1, "double_arrow_up", "text-danger", 'title="Priority: Very high"'),
+            (60, "double_arrow_up", "text-danger", 'title="Priority: Very high"'),
+            (61, "single_arrow_up", "text-warning", 'title="Priority: High"'),
+            (80, "single_arrow_up", "text-warning", 'title="Priority: High"'),
+            (81, "dash", "text-info", 'title="Priority: Medium"'),
+            (100, "dash", "text-info", 'title="Priority: Medium"'),
+            (101, "single_arrow_down", "text-muted", 'title="Priority: Low"'),
+            (120, "single_arrow_down", "text-muted", 'title="Priority: Low"'),
+            (121, "double_arrow_down", "text-secondary", 'title="Priority: Very low"'),
+            (999, "double_arrow_down", "text-secondary", 'title="Priority: Very low"'),
+        )
+
+        def fake_load_icon(path: str, *, auto_prefix: bool = True) -> bytes:
+            return f'<svg data-icon="{path}"></svg>'.encode()
+
+        with (
+            patch(
+                "weblate.trans.templatetags.translations.get_alerts", return_value=[]
+            ),
+            patch(
+                "weblate.trans.templatetags.translations.load_icon",
+                side_effect=fake_load_icon,
+            ),
+        ):
+            for priority, svg, css_class, title in cases:
+                component = Component(
+                    project=project,
+                    slug="c",
+                    name="c",
+                    priority=priority,
+                    source_language=Language(),
+                )
+                html = str(indicate_alerts(context, component))
+                self.assertIn(f'data-icon="priorities/{svg}.svg"', html)
+                self.assertIn(f'class="state-icon {css_class}"', html)
+                self.assertIn(title, html)
+
+
 class LocationLinksTest(TestCase):
     def setUp(self) -> None:
         self.unit = Unit(