Squashed 'spiffworkflow-frontend/' changes from e6fe405e..572d779f

572d779f Some changes from Dan (#87)

git-subtree-dir: spiffworkflow-frontend
git-subtree-split: 572d779f74639d9fedfc6b399d5db31fc90f5df5

package.json

@@ -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",

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);
+}

src/routes/TaskShow.tsx

@@ -3,6 +3,8 @@ 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 remarkGfm from 'remark-gfm';
 import HttpService from '../services/HttpService';
 import ErrorContext from '../contexts/ErrorContext';
 
@@ -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,20 @@ 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 +165,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>
     );