we can run a process model w/ burnettk

src/routes/ProcessModelShow.js

@@ -5,14 +5,15 @@ import { HOT_AUTH_TOKEN } from '../config';
 import { useParams } from "react-router-dom";
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb'
 import FileInput from '../components/FileInput'
+import Button from 'react-bootstrap/Button'
 import 'bootstrap/dist/css/bootstrap.css';
 
 export default function ProcessModelShow() {
   let params = useParams();
 
-  const [isLoaded, setIsLoaded] = useState(false);
-  const [errro, setError] = useState(null);
+  const [error, setError] = useState(null);
   const [processModel, setProcessModel] = useState(null);
+  const [processInstanceResult, setProcessInstanceResult] = useState(null);
 
   useEffect(() => {
     fetch(`${BACKEND_BASE_URL}/process-models/${params.process_model_id}`, {
@@ -23,37 +24,61 @@ export default function ProcessModelShow() {
       .then(res => res.json())
       .then(
         (result) => {
-          setIsLoaded(true);
           setProcessModel(result);
         },
         // Note: it's important to handle errors here
         // instead of a catch() block so that we don't swallow
         // exceptions from actual bugs in components.
         (error) => {
-          setIsLoaded(true);
           setError(error);
         }
       )
   }, []);
 
+  const processModelRun = ((event) => {
+    fetch(`${BACKEND_BASE_URL}/process-models/${processModel.id}`, {
+      headers: new Headers({
+        'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
+      }),
+      method: 'POST',
+    })
+      .then(res => res.json())
+      .then(
+        (result) => {
+          setProcessInstanceResult(result);
+        },
+        (error) => {
+          setError(error);
+        }
+      )
+  });
+
+  let processInstanceResultTag = ""
+  if (processInstanceResult) {
+    processInstanceResultTag = <pre>{processInstanceResult.status}: {JSON.stringify(processInstanceResult.data)}</pre>
+  }
+
   if (processModel) {
     return (
       <main style={{ padding: "1rem 0" }}>
       <ProcessBreadcrumb
         processGroupId={processModel.process_group_id}
-        processModelId={params.process_model_id}
+        processModelId={processModel.id}
       />
       <h2>Process Model: {processModel.id}</h2>
+      {processInstanceResultTag}
       <FileInput
         processModel={processModel}
       />
+      <Button onClick={processModelRun} variant="primary">Run</Button>
       <ul>
       {processModel.files.map(file_bpmn => (
         <li key={file_bpmn.name}>
-        <Link to={`/process-models/${params.process_model_id}/file/${file_bpmn.name}`}>{file_bpmn.name}</Link>
+        <Link to={`/process-models/${processModel.id}/file/${file_bpmn.name}`}>{file_bpmn.name}</Link>
         </li>
       ))}
       </ul>
+
       </main>
     );
   } else {