From 0ff8b5a8e30709599864c0543f276fa6ae60bd9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20P=C3=A9ters?= <fpeters@entrouvert.com>
Date: Tue, 10 May 2022 09:47:38 +0200
Subject: [PATCH] backoffice: redo workflow inspect page as a template (#65051)

---
 wcs/admin/workflows.py                        | 102 +----------------
 wcs/qommon/static/css/dc2/admin.scss          |  39 ++++++-
 .../wcs/backoffice/workflow-inspect.html      | 107 ++++++++++++++++++
 3 files changed, 151 insertions(+), 97 deletions(-)
 create mode 100644 wcs/templates/wcs/backoffice/workflow-inspect.html

diff --git a/wcs/admin/workflows.py b/wcs/admin/workflows.py
index 9ae641540..ff3e76c0b 100644
--- a/wcs/admin/workflows.py
+++ b/wcs/admin/workflows.py
@@ -1669,110 +1669,20 @@ class WorkflowPage(Directory):
         if get_publisher().snapshot_class:
             r += htmltext('<li><a rel="popup" href="history/save">%s</a></li>') % _('Save snapshot')
             r += htmltext('<li><a href="history/">%s</a></li>') % _('History')
+        r += htmltext('<li><a href="inspect">%s</a></li>') % _('Inspector')
         r += htmltext('</ul>')
         if not self.workflow.is_readonly():
             r += self.get_new_status_form()
         r += LoggedErrorsDirectory.errors_block(workflow_id=self.workflow.id)
         return r.getvalue()
 
-    def expand_workflow_formdef(self, formdef):
-        r = TemplateIO(html=True)
-        r += htmltext('<ul>')
-        for field in formdef.fields:
-            r += htmltext('<li>')
-            r += field.label
-            if getattr(field, 'required', False):
-                r += htmltext(' (%s)') % _('required')
-            r += htmltext(' (%s)') % field.get_type_label()
-            if field.varname:
-                r += htmltext(' (<tt>%s</tt>)') % field.varname
-            r += htmltext('</li>')
-        r += htmltext('</ul>')
-        return r.getvalue()
-
     def inspect(self):
-        self.html_top('%s - %s' % (_('Workflow'), self.workflow.name))
-        r = TemplateIO(html=True)
+        self.html_top(self.workflow.name)
         get_response().breadcrumb.append(('inspect', _('Inspector')))
-        r += htmltext('<div class="section">')
-        r += htmltext('<h2>%s</h2>') % _('Workflow Functions')
-        r += htmltext('<ul>')
-        for label in (self.workflow.roles or {}).values():
-            r += htmltext('<li>%s</li>') % label
-        r += htmltext('</ul>')
-        r += htmltext('</div>')
-
-        if self.workflow.variables_formdef:
-            r += htmltext('<div class="section">')
-            r += htmltext('<h2>%s</h2>') % _('Workflow Variables')
-            r += self.expand_workflow_formdef(self.workflow.variables_formdef)
-            r += htmltext('</div>')
-
-        if self.workflow.backoffice_fields_formdef:
-            r += htmltext('<div class="section">')
-            r += htmltext('<h2>%s</h2>') % _('Backoffice Fields')
-            r += self.expand_workflow_formdef(self.workflow.backoffice_fields_formdef)
-            r += htmltext('</div>')
-
-        if self.workflow.criticality_levels:
-            r += htmltext('<div class="section">')
-            r += htmltext('<h2>%s</h2>') % _('Criticality Levels')
-            r += htmltext('<ul>')
-            for level in self.workflow.criticality_levels or []:
-                r += htmltext('<li>%s</li>') % level.name
-            r += htmltext('</ul>')
-            r += htmltext('</div>')
-
-        r += htmltext('<h2>%s</h2>') % _('Statuses')
-        r += htmltext('<div class="expanded-statuses">')
-        for status in self.workflow.possible_status or []:
-            r += htmltext(
-                '<div class="section status" style="border-left-color: #%s;">'
-                % (getattr(status, 'colour', None) or 'fff')
-            )
-            r += htmltext('<h3 id="status-%s"><a href="status/%s/">%s</a></h3>') % (
-                status.id,
-                status.id,
-                status.name,
-            )
-            if status.backoffice_info_text:
-                r += htmltext('<div>')
-                r += htmltext(status.backoffice_info_text)
-                r += htmltext('</div>')
-            if not status.items:
-                r += htmltext('<p>%s</p>') % _('No actions in this status.')
-            for item in status.items or []:
-                r += htmltext('<h4><a href="status/%s/items/%s/">%s</a></h4>') % (
-                    status.id,
-                    item.id,
-                    item.description,
-                )
-                r += item.get_parameters_view()
-            r += htmltext('</div>')
-        r += htmltext('</div>')
-
-        if self.workflow.global_actions:
-            r += htmltext('<h2>%s</h2>') % _('Global Actions')
-            r += htmltext('<div class="expanded-statuses">')
-            for action in self.workflow.global_actions:
-                r += htmltext('<div class="section global-action">')
-                r += htmltext('<h3><a href="global-actions/%s/">%s</a></h3>') % (action.id, action.name)
-                r += htmltext('<ul>')
-                for trigger in action.triggers:
-                    r += htmltext('<li>%s</li>') % trigger.render_as_line()
-                r += htmltext('</ul>')
-                r += htmltext('</h3>')
-                for item in action.items or []:
-                    r += htmltext('<h4><a href="global-actions/%s/items/%s/">%s</a></h4>') % (
-                        action.id,
-                        item.id,
-                        item.description,
-                    )
-                    r += item.get_parameters_view()
-                r += htmltext('</div>')
-            r += htmltext('</div>')
-
-        return r.getvalue()
+        context = {'workflow': self.workflow, 'view': self}
+        return template.QommonTemplateResponse(
+            templates=['wcs/backoffice/workflow-inspect.html'], context=context
+        )
 
     def svg(self):
         response = get_response()
diff --git a/wcs/qommon/static/css/dc2/admin.scss b/wcs/qommon/static/css/dc2/admin.scss
index 920baa18c..2107f9e11 100644
--- a/wcs/qommon/static/css/dc2/admin.scss
+++ b/wcs/qommon/static/css/dc2/admin.scss
@@ -1634,13 +1634,34 @@ div.expanded-status {
 }
 
 div.expanded-statuses div.status {
-	border-left: 5px solid transparent;
 	border-bottom: 1px dotted #888;
 	margin-bottom: 1em;
 	counter-reset: items;
 	counter-increment: status;
 }
 
+.inspect-status--link {
+	display: flex;
+	align-items: center;
+}
+
+.inspect-status--colour {
+	display: inline-block;
+	height: 1.5rem;
+	width: 1.5rem;
+	margin-right: 1rem;
+	border-radius: 3px;
+}
+
+.inspect--quicknav {
+	display: flex;
+	align-items: baseline;
+}
+
+.inspect--jumpto {
+	margin-right: 1em;
+}
+
 div.expanded-statuses div.status h3 {
 	font-size: 150%;
 	font-weight: normal;
@@ -1743,6 +1764,22 @@ form div.page > div {
 			color: #666;
 		}
 	}
+	.inspect--quicklinks {
+		display: flex;
+		flex-wrap: wrap;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		li {
+			margin-left: 0;
+			margin-right: 1em;
+		}
+		a.button {
+			margin-bottom: 1em;
+			padding-top: 0;
+			padding-bottom: 0;
+		}
+	}
 }
 
 ul.biglist.form-inspector {
diff --git a/wcs/templates/wcs/backoffice/workflow-inspect.html b/wcs/templates/wcs/backoffice/workflow-inspect.html
new file mode 100644
index 000000000..523921e61
--- /dev/null
+++ b/wcs/templates/wcs/backoffice/workflow-inspect.html
@@ -0,0 +1,107 @@
+{% extends "wcs/backoffice/base.html" %}
+{% load i18n %}
+
+{% block appbar %}{% endblock %}
+
+{% block content %}
+
+<div class="pk-tabs inspect-tabs inspect-workflow-tabs">
+ <div class="pk-tabs--tab-list" role="tablist">
+  <button role="tab" aria-selected="true" aria-controls="inspect-statuses" id="tab-statuses" tabindex="0">{% trans "Statuses" %}</button>
+  {% if workflow.global_actions %}
+  <button role="tab" aria-selected="false" aria-controls="inspect-global-actions" id="tab-global-actions" tabindex="-1">{% trans "Global Actions" %}</button>
+  {% endif %}
+  <button role="tab" aria-selected="false" aria-controls="inspect-functions" id="tab-functions" tabindex="-1">{% trans "Functions" %}</button>
+  {% if workflow.variables_formdef %}
+  <button role="tab" aria-selected="false" aria-controls="inspect-variables" id="tab-variables" tabindex="-1">{% trans "Workflow Variables" %}</button>
+  {% endif %}
+  {% if workflow.backoffice_fields_formdef %}
+  <button role="tab" aria-selected="false" aria-controls="inspect-fields" id="tab-fields" tabindex="-1">{% trans "Backoffice Fields" %}</button>
+  {% endif %}
+  {% if workflow.criticality_levels %}
+  <button role="tab" aria-selected="false" aria-controls="inspect-criticality" id="tab-criticality" tabindex="-1">{% trans "Criticality Levels" %}</button>
+  {% endif %}
+ </div>
+ <div class="pk-tabs--container">
+
+ <div id="inspect-functions" role="tabpanel" tabindex="0" aria-labelledby="tab-functions" hidden>
+<ul>
+{% for label in workflow.roles.values %}
+<li>{{ label }}</li>
+{% endfor %}
+</ul>
+</div>
+
+<div id="inspect-variables" role="tabpanel" tabindex="0" aria-labelledby="tab-variables" hidden>
+{% for field in workflow.variables_formdef.fields %}
+<div class="inspect-field inspect-field--{{ field.key }} {% if forloop.first %}inspect-field--first{% endif %}" data-field-id="{{ field.id }}">
+<h4><a href="variables/fields/{{ field.id }}/">{{ field.ellipsized_label }}</a> <span class="inspect-field-type">- {{ field.get_type_label }}</span></h4>
+{{ field.get_parameters_view|safe }}
+</div>
+{% endfor %}
+</div>
+
+<div id="inspect-fields" role="tabpanel" tabindex="0" aria-labelledby="tab-fields" hidden>
+{% for field in workflow.backoffice_fields_formdef.fields %}
+<div class="inspect-field inspect-field--{{ field.key }} {% if forloop.first %}inspect-field--first{% endif %}" data-field-id="{{ field.id }}">
+<h4><a href="backoffice-fields/fields/{{ field.id }}/">{{ field.ellipsized_label }}</a> <span class="inspect-field-type">- {{ field.get_type_label }}</span></h4>
+{{ field.get_parameters_view|safe }}
+</div>
+{% endfor %}
+</div>
+
+<div id="inspect-criticality" role="tabpanel" tabindex="0" aria-labelledby="tab-criticality" hidden>
+<ul>
+{% for level in workflow.criticality_levels %}<li>{{ level.name }}</li>{% endfor %}
+</ul>
+</div>
+
+<div id="inspect-statuses" role="tabpanel" tabindex="0" aria-labelledby="tab-statuses">
+<nav class="inspect--quicknav"><span class="inspect--jumpto">{% trans "Jump to:" %}</span><ul class="inspect--quicklinks">
+{% for status in workflow.possible_status %}
+<li><a class="button" href="#status-{{ status.id }}">{{ status.name }}</a></li>
+{% endfor %}
+</ul></nav>
+<div class="expanded-statuses">
+{% for status in workflow.possible_status %}
+<div class="section status">
+<h3 id="status-{{ status.id }}"
+    ><a href="status/{{ status.id }}/" class="inspect-status--link">
+    <span class="inspect-status--colour" style="background-color: #{{ status.colour|default:"fff" }}"></span>
+    {{ status.name }}</a></h3>
+{% if status.backoffice_info_text %}<div>{{ status.backoffice_info_text|safe }}</div>{% endif %}
+{% for item in status.items %}
+<h4><a href="status/{{ status.id }}/items/{{ item.id }}/">{{ item.description }}</a></h4>
+{{ item.get_parameters_view|safe }}
+{% empty %}
+<p>{% trans "No actions in this status." %}</p>
+{% endfor %}
+</div>
+{% endfor %}
+</div>
+</div>
+
+<div id="inspect-global-actions" role="tabpanel" tabindex="0" aria-labelledby="tab-global-actions" hidden>
+<nav class="inspect--quicknav"><span class="inspect--jumpto">{% trans "Jump to:" %}</span><ul class="inspect--quicklinks">
+{% for action in workflow.global_actions %}
+<li><a class="button" href="#action-{{ action.id }}">{{ action.name }}</a></li>
+{% endfor %}
+</ul></nav>
+<div class="expanded-statuses">
+{% for action in workflow.global_actions %}
+<div class="section global-action">
+<h3><a id="action-{{ action.id }}" href="global-actions/{{ action.id }}/">{{ action.name }}</a></h3>
+<h4>{% trans "Triggers" %}</h4>
+<ul>{% for trigger in action.triggers %}<li>{{ trigger.render_as_line }}</li>{% endfor %}</ul>
+{% for item in action.items %}
+<h4><a href="global-actions/{{ action.id }}/items/{{ item.id }}/">{{ item.description }}</a></h4>
+{{ item.get_parameters_view|safe }}
+{% endfor %}
+</div>
+{% endfor %}
+</div>
+</div>
+
+</div> <!-- pk-tabs-container -->
+ </div> <!-- pk-tabs -->
+{% endblock %}