Updaging the jinja processing so it doesn't leave a bunch of blank lines in the markdown that has strong feelings about white space. Updating the front end to render markdown formatted instructions. And adding a little css love to tables that are generated in Markdown.

spiffworkflow-backend/poetry.lock

@@ -630,7 +630,7 @@ flask-mail = "*"
 flask-marshmallow = "*"
 flask-migrate = "*"
 flask-restful = "*"
-sentry-sdk = "*"
+sentry-sdk = "1.9.0"
 sphinx-autoapi = "^1.9.0"
 spiffworkflow = "*"
 werkzeug = "*"
@@ -639,7 +639,7 @@ werkzeug = "*"
 type = "git"
 url = "https://github.com/sartography/flask-bpmn"
 reference = "main"
-resolved_reference = "f3fc539423a3522d142146d2a039c0cd49badaf5"
+resolved_reference = "2e4b592fa36406423d69cd24018f720a4c041d8a"
 
 [[package]]
 name = "Flask-Cors"
@@ -1604,7 +1604,7 @@ gitlab = ["python-gitlab (>=1.3.0)"]
 
 [[package]]
 name = "sentry-sdk"
-version = "1.9.10"
+version = "1.9.0"
 description = "Python client for Sentry (https://sentry.io)"
 category = "main"
 optional = false
@@ -1612,7 +1612,7 @@ python-versions = "*"
 
 [package.dependencies]
 certifi = "*"
-urllib3 = {version = ">=1.26.11", markers = "python_version >= \"3.6\""}
+urllib3 = ">=1.10.0"
 
 [package.extras]
 aiohttp = ["aiohttp (>=3.5)"]
@@ -2178,7 +2178,7 @@ testing = ["func-timeout", "jaraco.itertools", "pytest (>=6)", "pytest-black (>=
 [metadata]
 lock-version = "1.1"
 python-versions = ">=3.9,<3.11"
-content-hash = "ba476dd0748bb440b522d1bf24fb62eb30ce3cfbd48b9e3d8f7b5069ddc78ba9"
+content-hash = "5a1aa6f7788fe750e6c4f5681b71d7a8269806da061be6565746e3a23203196f"
 
 [metadata.files]
 alabaster = [
@@ -2957,18 +2957,7 @@ py = [
     {file = "py-1.11.0.tar.gz", hash = "sha256:51c75c4126074b472f746a24399ad32f6053d1b34b68d2fa41e558e6f4a98719"},
 ]
 pyasn1 = [
-    {file = "pyasn1-0.4.8-py2.4.egg", hash = "sha256:fec3e9d8e36808a28efb59b489e4528c10ad0f480e57dcc32b4de5c9d8c9fdf3"},
-    {file = "pyasn1-0.4.8-py2.5.egg", hash = "sha256:0458773cfe65b153891ac249bcf1b5f8f320b7c2ce462151f8fa74de8934becf"},
-    {file = "pyasn1-0.4.8-py2.6.egg", hash = "sha256:5c9414dcfede6e441f7e8f81b43b34e834731003427e5b09e4e00e3172a10f00"},
-    {file = "pyasn1-0.4.8-py2.7.egg", hash = "sha256:6e7545f1a61025a4e58bb336952c5061697da694db1cae97b116e9c46abcf7c8"},
     {file = "pyasn1-0.4.8-py2.py3-none-any.whl", hash = "sha256:39c7e2ec30515947ff4e87fb6f456dfc6e84857d34be479c9d4a4ba4bf46aa5d"},
-    {file = "pyasn1-0.4.8-py3.1.egg", hash = "sha256:78fa6da68ed2727915c4767bb386ab32cdba863caa7dbe473eaae45f9959da86"},
-    {file = "pyasn1-0.4.8-py3.2.egg", hash = "sha256:08c3c53b75eaa48d71cf8c710312316392ed40899cb34710d092e96745a358b7"},
-    {file = "pyasn1-0.4.8-py3.3.egg", hash = "sha256:03840c999ba71680a131cfaee6fab142e1ed9bbd9c693e285cc6aca0d555e576"},
-    {file = "pyasn1-0.4.8-py3.4.egg", hash = "sha256:7ab8a544af125fb704feadb008c99a88805126fb525280b2270bb25cc1d78a12"},
-    {file = "pyasn1-0.4.8-py3.5.egg", hash = "sha256:e89bf84b5437b532b0803ba5c9a5e054d21fec423a89952a74f87fa2c9b7bce2"},
-    {file = "pyasn1-0.4.8-py3.6.egg", hash = "sha256:014c0e9976956a08139dc0712ae195324a75e142284d5f87f1a87ee1b068a359"},
-    {file = "pyasn1-0.4.8-py3.7.egg", hash = "sha256:99fcc3c8d804d1bc6d9a099921e39d827026409a58f2a720dcdb89374ea0c776"},
     {file = "pyasn1-0.4.8.tar.gz", hash = "sha256:aef77c9fb94a3ac588e87841208bdec464471d9871bd5050a287cc9a475cd0ba"},
 ]
 pycodestyle = [
@@ -3240,8 +3229,8 @@ safety = [
     {file = "safety-2.3.1.tar.gz", hash = "sha256:6e6fcb7d4e8321098cf289f59b65051cafd3467f089c6e57c9f894ae32c23b71"},
 ]
 sentry-sdk = [
-    {file = "sentry-sdk-1.9.10.tar.gz", hash = "sha256:4fbace9a763285b608c06f01a807b51acb35f6059da6a01236654e08b0ee81ff"},
+    {file = "sentry-sdk-1.9.0.tar.gz", hash = "sha256:f185c53496d79b280fe5d9d21e6572aee1ab802d3354eb12314d216cfbaa8d30"},
-    {file = "sentry_sdk-1.9.10-py2.py3-none-any.whl", hash = "sha256:2469240f6190aaebcb453033519eae69cfe8cc602065b4667e18ee14fc1e35dc"},
+    {file = "sentry_sdk-1.9.0-py2.py3-none-any.whl", hash = "sha256:60b13757d6344a94bf0ccb3c0a006c4de77daab09871b30fbbd05d5ec24e54fb"},
 ]
 setuptools = [
     {file = "setuptools-65.4.1-py3-none-any.whl", hash = "sha256:1b6bdc6161661409c5f21508763dc63ab20a9ac2f8ba20029aaaa7fdb9118012"},

spiffworkflow-backend/src/spiffworkflow_backend/routes/process_api_blueprint.py

@@ -1255,7 +1255,7 @@ def prepare_form_data(
 
 def render_jinja_template(unprocessed_template: str, data: dict[str, Any]) -> str:
     """Render_jinja_template."""
-    jinja_environment = jinja2.Environment(autoescape=True)
+    jinja_environment = jinja2.Environment(autoescape=True, lstrip_blocks=True, trim_blocks=True)
     template = jinja_environment.from_string(unprocessed_template)
     return template.render(**data)
 

spiffworkflow-frontend/package.json

@@ -23,7 +23,7 @@
     "bootstrap": "^5.2.0",
     "bpmn-js": "^9.3.2",
     "bpmn-js-properties-panel": "^1.5.0",
-    "bpmn-js-spiffworkflow": "sartography/bpmn-js-spiffworkflow#feature/script_unit_tests",
+    "bpmn-js-spiffworkflow": "github:sartography/bpmn-js-spiffworkflow",
     "craco": "^0.0.3",
     "date-fns": "^2.28.0",
     "diagram-js": "^8.5.0",
@@ -39,8 +39,10 @@
     "react-datepicker": "^4.8.0",
     "react-dom": "^18.2.0",
     "react-jsonschema-form": "^1.8.1",
+    "react-markdown": "^8.0.3",
     "react-router-dom": "^6.3.0",
     "react-scripts": "^5.0.1",
+    "remark-gfm": "^3.0.1",
     "serve": "^14.0.0",
     "timepicker": "^1.13.18",
     "typescript": "^4.7.4",

spiffworkflow-frontend/src/index.css

@@ -62,3 +62,27 @@ span.bjs-crumb {
 .container .nav-tabs {
   margin-top: 1em;
 }
+
+
+/* Markdown Tables */
+.markdown table {
+  color: #333;
+  background: white;
+  border: 1px solid grey;
+  font-size: 12pt;
+  border-collapse: collapse;
+}
+.markdown table thead th,
+.markdown table tfoot th {
+  color: #777;
+  background: rgba(0,0,0,.1);
+}
+.markdown table th,
+.markdown table td {
+  padding: .5em;
+  border: 1px solid lightgrey;
+}
+/* Zebra Table Style */
+.markdown tbody tr:nth-of-type(odd) {
+  background: rgba(0,0,0,.05);
+}

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -235,6 +235,7 @@ export default function ProcessModelEditDiagram() {
   };
 
   const makeApiHandler = (event: any) => {
+    console.log("Service Tasks Returned.")
     return function fireEvent(results: any) {
       event.eventBus.fire('spiff.service_tasks.returned', {
         serviceTaskOperators: results,

spiffworkflow-frontend/src/routes/TaskShow.tsx

@@ -3,8 +3,10 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
 import Form from '@rjsf/core';
 import { Button, Stack } from 'react-bootstrap';
 
+import ReactMarkdown from 'react-markdown';
 import HttpService from '../services/HttpService';
 import ErrorContext from '../contexts/ErrorContext';
+import remarkGfm from 'remark-gfm';
 
 export default function TaskShow() {
   const [task, setTask] = useState(null);
@@ -97,8 +99,6 @@ export default function TaskShow() {
     if (taskToUse.type === 'Manual Task') {
       taskData = {};
       jsonSchema = {
-        title: 'Instructions',
-        description: taskToUse.properties.instructionsForEndUser,
         type: 'object',
         required: [],
         properties: {
@@ -142,6 +142,18 @@ export default function TaskShow() {
     );
   };
 
+  const instructionsElement = (taskToUse: any) => {
+    let instructions = '';
+    if (taskToUse.type === 'Manual Task') {
+      instructions = taskToUse.properties.instructionsForEndUser;
+    }
+    return (
+      <div className="markdown">
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>{instructions}</ReactMarkdown>
+      </div>
+    );
+  };
+
   if (task) {
     const taskToUse = task as any;
     let statusString = '';
@@ -151,11 +163,12 @@ export default function TaskShow() {
 
     return (
       <main>
-        {buildTaskNavigation()}
+        <div>{buildTaskNavigation()}</div>
         <h3>
           Task: {taskToUse.title} ({taskToUse.process_model_display_name})
           {statusString}
         </h3>
+        {instructionsElement(taskToUse)}
         {formElement(taskToUse)}
       </main>
     );