tests/admin_pages/test_workflow.py

@@ -6,6 +6,7 @@ import xml.etree.ElementTree as ET
 
 import pytest
 import responses
+from pyquery import PyQuery
 from quixote.http_request import Upload as QuixoteUpload
 from webtest import Radio, Upload
 
@@ -2397,6 +2398,20 @@ def test_workflows_backoffice_fields(pub):
     workflow = Workflow.get(workflow.id)
     assert workflow.possible_status[0].items[0].fields == [{'field_id': first_field_id, 'value': 'Hello'}]
 
+    # check backoffice fields have their type displayed on workflow page
+    resp = app.get('/backoffice/workflows/1/')
+    assert [PyQuery(x).text() for x in resp.pyquery('.backoffice-fields li')] == [
+        'foobar Text (line)',
+        'foobar2 Text (line)',
+        'foobar3 Title',
+    ]
+
+    workflow.refresh_from_storage()
+    workflow.backoffice_fields_formdef.fields[0].varname = 'foo_bar'
+    workflow.store()
+    resp = app.get('/backoffice/workflows/1/')
+    assert '<code class="varname">{{ form_<wbr/>var_<wbr/>foo_<wbr/>bar }}</code>' in resp.text
+
 
 def test_workflows_backoffice_fields_backlinks_to_actions(pub):
     create_superuser(pub)

wcs/qommon/static/css/dc2/admin.scss

@@ -85,7 +85,7 @@ li.biglistitem {
 	color: #505050;
 	position: relative;
 	min-height: 2.5em;
-	line-height: 2.5em;
+	line-height: 1.8em;
 }
 
 ul.biglist.sortable li {
@@ -793,7 +793,7 @@ ul.biglist.sortable {
 ul.biglist li > a,
 ul.biglist strong a {
 	display: block;
-	padding: 0.5ex 1ex;
+	padding: 1.2ex 1ex;
 	border: none;
 	font-weight: normal;
 	color: #215D9C;

wcs/qommon/templatetags/qommon.py

@@ -1244,3 +1244,8 @@ def with_auth(value, arg):
     parsed_url = urllib.parse.urlparse(value)
     new_netloc = '%s@%s' % (arg, parsed_url.netloc.rsplit('@', 1)[-1])
     return urllib.parse.urlunparse(parsed_url._replace(netloc=new_netloc))
+
+
+@register.filter
+def wbr(value):
+    return mark_safe(value.replace('_', '_<wbr/>'))

wcs/templates/wcs/backoffice/workflow.html

@@ -88,8 +88,9 @@
             {% for field in workflow.variables_formdef.fields %}
               {% if field.varname %}
                 <li><a href="variables/fields/{{ field.id }}/">{{ field.ellipsized_label }}
+                  <span class="details">{{ field.description }}</span>
                   {% if '*' not in field.varname %}
-                    <code class="varname">{{ "{{" }} form_option_{{ field.varname }} }}</code>
+                    <code class="varname">{{ "{{" }} form_<wbr/>option_<wbr/>{{ field.varname|wbr }} }}</code>
                   {% endif %}
                 </a></li>
               {% endif %}
@@ -155,8 +156,9 @@
           <ul class="biglist">
             {% for field in workflow.backoffice_fields_formdef.fields %}
               <li class="biglistitem"><a class="biglistitem--content" href="backoffice-fields/fields/{{ field.id }}/">{{ field.ellipsized_label }}
+                <span class="details">{{ field.description }}</span>
                 {% if field.varname %}
-                  <code class="varname">{{ "{{" }} form_var_{{ field.varname }} }}</code>
+                  <code class="varname">{{ "{{" }} form_<wbr/>var_<wbr/>{{ field.varname|wbr }} }}</code>
                 {% endif %}
               </a></li>
             {% endfor %}