views: Add tooltips with description to labels

help_text is not relevant to database migrations. This commit
modifies the label migration instead of creating a new migration.

Author: fstachura

htdocs/js/selectize-plugins.js

@@ -47,3 +47,25 @@ Selectize.define('mod_focus_input_after_select', function (options) {
         prevSelect(e);
     };
 });
+
+function selectize_labels_input(selector, label_options) {
+    selector.selectize({
+        plugins: ['mod_enter_key_submit', 'mod_focus_input_after_select'],
+        maxItems: null,
+        persist: false,
+        hideSelected: true,
+        // Search for options that begin with a minus sign
+        respect_word_boundaries: false,
+        delimiter: ' ',
+        options: label_options,
+        render: {
+            item: function (item, escape) {
+                return '<div><span title="' + escape(item.description) + '">' + escape(item.text) + '</span></div>';
+            },
+            option: function (item, escape) {
+                console.log(item, escape);
+                return '<div class="option" title="' + escape(item.description) + '">' + escape(item.text) + '</div>';
+            },
+        },
+    });
+}

patchwork/migrations/0054_label_coverlabel_cover_labels_patchlabel_and_more.py

@@ -35,7 +35,8 @@ class Migration(migrations.Migration):
                     models.TextField(
                         blank=True,
                         help_text='A description of what the label is '
-                        'and when it should be applied.',
+                        'and when it should be applied. The text will be '
+                        'visible in tooltips of label elements in the UI.',
                         max_length=1000,
                         null=True,
                     ),

patchwork/models.py

@@ -290,7 +290,8 @@ class Label(models.Model):
         blank=True,
         max_length=1000,
         help_text='A description of what the label is and when it should be '
-        'applied.',
+        'applied. The text will be visible in tooltips of label elements in '
+        'the UI.',
     )
     color = ColorField(help_text='The color code to use in the UI.')
 

patchwork/templates/patchwork/partials/filters.html

@@ -67,27 +67,20 @@
     );
 
     let label_options = project_labels.map(l => ({
-        value: l,
-        text: l,
+        value: l.name,
+        text: l.name,
+        description: l.description,
     }));
 
     label_options = label_options.concat(
         project_labels.map(l => ({
-            value: "-" + l,
-            text: "-" + l,
+            value: "-" + l.name,
+            text: "-" + l.name,
+            description: l.description,
         }))
     );
 
-    const labels_selectize = $('#labels_input').selectize({
-        plugins: ['mod_enter_key_submit', 'mod_focus_input_after_select'],
-        maxItems: null,
-        persist: false,
-        hideSelected: true,
-        // Search for options that begin with a minus sign
-        respect_word_boundaries: false,
-        delimiter: ' ',
-        options: label_options,
-    });
+    selectize_labels_input($('#labels_input'), label_options);
 });
 </script>
 

patchwork/templates/patchwork/partials/patch-forms.html

@@ -1,16 +1,20 @@
 {% load static %}
 
+{{ project_labels|json_script:"project-labels-data" }}
+
 <script type="text/javascript">
 $(document).ready(function() {
-    $('.labels-field').selectize({
-        plugins: ['mod_focus_input_after_select'],
-        maxItems: null,
-        persist: false,
-        hideSelected: true,
-        // Search for options that begin with a minus sign
-        respect_word_boundaries: false,
-        delimiter: ' ',
-    });
+    const project_labels = JSON.parse(
+        document.getElementById('project-labels-data').textContent
+    );
+
+    let label_options = project_labels.map(l => ({
+        value: l.id,
+        text: l.name,
+        description: l.description,
+    }));
+
+    selectize_labels_input($('.labels-field'), label_options);
 });
 </script>
 

patchwork/templatetags/patch.py

@@ -107,8 +107,8 @@ def text_color(hex_color):
             text_color(label.color),
         )
         output.append(
-            '<span class="label patch-label" style="%s">%s</span>'
-            % (style, escape(label.name))
+            '<span class="label patch-label" style="%s" title="%s">%s</span>'
+            % (style, escape(label.description), escape(label.name))
         )
 
     # Label name is escaped above. Color is formatted in a way that

patchwork/views/__init__.py

@@ -190,7 +190,7 @@ def generic_list(
         filter_settings = []
 
     project_labels = [
-        label.name
+        {"id": label.id, "name": label.name, "description": label.description}
         for label in Label.get_project_labels(project)
     ]
 

patchwork/views/patch.py

@@ -17,6 +17,7 @@
 from patchwork.models import Cover
 from patchwork.models import Patch
 from patchwork.models import Project
+from patchwork.models import Label
 from patchwork.views import generic_list
 from patchwork.views import set_bundle
 from patchwork.views.utils import patch_to_mbox
@@ -115,6 +116,12 @@ def patch_detail(request, project_id, msgid):
         related_same_project = []
         related_different_project = []
 
+    project_labels = [
+        {"id": label.id, "name": label.name, "description": label.description}
+        for label in Label.get_project_labels(patch.project)
+    ]
+
+    context['project_labels'] = project_labels
     context['comments'] = comments
     context['checks'] = Patch.filter_unique_checks(
         patch.check_set.all().select_related('user'),