added test to delete a process instance w/ burnettk

cypress/e2e/process_instances.cy.js

@@ -17,7 +17,7 @@ describe('process-instances', () => {
     const bpmnFile = "process_model_one.bpmn";
 
     cy.contains(originalDmnOutputForKevin).should('not.exist');;
-    runPrimaryBpmnFile(originalDmnOutputForKevin);
+    cy.runPrimaryBpmnFile(originalDmnOutputForKevin);
 
     // Change dmn
     cy.contains(dmnFile).click();
@@ -25,26 +25,26 @@ describe('process-instances', () => {
     updateDmnText(originalDmnOutputForKevin, newDmnOutputForKevin);
 
     cy.contains('acceptance-tests-model-1').click();
-    runPrimaryBpmnFile(newDmnOutputForKevin);
+    cy.runPrimaryBpmnFile(newDmnOutputForKevin);
 
     cy.contains(dmnFile).click();
     cy.contains(`Process Model File: ${dmnFile}`);
     updateDmnText(newDmnOutputForKevin, originalDmnOutputForKevin);
     cy.contains('acceptance-tests-model-1').click();
-    runPrimaryBpmnFile(originalDmnOutputForKevin);
+    cy.runPrimaryBpmnFile(originalDmnOutputForKevin);
 
     // Change bpmn
     cy.contains(bpmnFile).click();
     cy.contains(`Process Model File: ${bpmnFile}`);
     updateBpmnPythonScript(newPythonScript, bpmnFile);
     cy.contains('acceptance-tests-model-1').click();
-    runPrimaryBpmnFile(dmnOutputForDan);
+    cy.runPrimaryBpmnFile(dmnOutputForDan);
 
     cy.contains(bpmnFile).click();
     cy.contains(`Process Model File: ${bpmnFile}`);
     updateBpmnPythonScript(originalPythonScript, bpmnFile);
     cy.contains('acceptance-tests-model-1').click();
-    runPrimaryBpmnFile(originalDmnOutputForKevin);
+    cy.runPrimaryBpmnFile(originalDmnOutputForKevin);
   });
 
   it('can create a new instance and can modify with monaco text editor', () => {
@@ -59,22 +59,22 @@ describe('process-instances', () => {
     cy.contains(`Process Model File: ${bpmnFile}`);
     updateBpmnPythonScriptWithMonaco(newPythonScript, bpmnFile);
     cy.contains('acceptance-tests-model-1').click();
-    runPrimaryBpmnFile(dmnOutputForMike);
+    cy.runPrimaryBpmnFile(dmnOutputForMike);
 
     cy.contains(bpmnFile).click();
     cy.contains(`Process Model File: ${bpmnFile}`);
     updateBpmnPythonScriptWithMonaco(originalPythonScript, bpmnFile);
     cy.contains('acceptance-tests-model-1').click();
-    runPrimaryBpmnFile(dmnOutputForKevin);
+    cy.runPrimaryBpmnFile(dmnOutputForKevin);
   });
 
   it('can paginate items', () => {
     // make sure we have some process instances
-    runPrimaryBpmnFile('Very wonderful');
+    cy.runPrimaryBpmnFile('Very wonderful');
-    runPrimaryBpmnFile('Very wonderful');
+    cy.runPrimaryBpmnFile('Very wonderful');
-    runPrimaryBpmnFile('Very wonderful');
+    cy.runPrimaryBpmnFile('Very wonderful');
-    runPrimaryBpmnFile('Very wonderful');
+    cy.runPrimaryBpmnFile('Very wonderful');
-    runPrimaryBpmnFile('Very wonderful');
+    cy.runPrimaryBpmnFile('Very wonderful');
 
     cy.contains('Process Instances').click();
     cy.basicPaginationTest();
@@ -119,8 +119,3 @@ function updateBpmnPythonScriptWithMonaco(pythonScript, bpmnFile, elementId="pro
   cy.wait(500);
   cy.contains('Save').click();
 }
-
-function runPrimaryBpmnFile(expectedText) {
-  cy.contains('Run Primary').click();
-  cy.contains(expectedText);
-}

cypress/e2e/process_models.cy.js

@@ -87,6 +87,39 @@ describe('process-models', () => {
     cy.contains(modelId).should('not.exist');
   });
 
+  it('can upload and run a bpmn file', () => {
+    const uuid = () => Cypress._.random(0, 1e6)
+    const id = uuid()
+    const groupId = 'acceptance-tests-group-one';
+    const modelDisplayName = `Test Model 2 ${id}`;
+    const newModelDisplayName = `${modelDisplayName} edited`;
+    const modelId = `test-model-2-${id}`;
+    cy.contains(groupId).click();
+    cy.createModel(groupId, modelId, modelDisplayName);
+    cy.contains(`Process Group: ${groupId}`).click();
+    cy.contains(modelId);
+
+    cy.contains(modelId).click()
+    cy.url().should('include', `process-models/${groupId}/${modelId}`);
+    cy.contains(`Process Model: ${modelId}`);
+
+    cy.get('input[type=file]').selectFile('cypress/fixtures/test_bpmn_file_upload.bpmn')
+    cy.contains('Submit').click();
+    cy.runPrimaryBpmnFile('champion');
+
+    cy.contains('Process Instances').click();
+    cy.getBySel('process-instance-show-link').click();
+    cy.contains('Delete process instance').click();
+    cy.contains(`Process Instances for ${modelId}`);
+    cy.contains(`Process Model: ${modelId}`);
+    cy.contains(modelId).click();
+
+    cy.contains('Edit process model').click();
+    cy.contains('Delete process model').click();
+    cy.url().should('include', `process-groups/${groupId}`);
+    cy.contains(modelId).should('not.exist');
+  });
+
   it('can paginate items', () => {
     cy.contains('acceptance-tests-group-one').click();
     cy.basicPaginationTest();

cypress/fixtures/test_bpmn_file_upload.bpmn

@@ -0,0 +1,40 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" id="Definitions_96f6665" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="3.0.0-dev">
+  <bpmn:process id="Process_bd2e724" isExecutable="true">
+    <bpmn:startEvent id="StartEvent_1">
+      <bpmn:outgoing>Flow_07vd2ar</bpmn:outgoing>
+    </bpmn:startEvent>
+    <bpmn:scriptTask id="Activity_19x24om" name="script" scriptFormat="python">
+      <bpmn:incoming>Flow_07vd2ar</bpmn:incoming>
+      <bpmn:outgoing>Flow_1alkjjb</bpmn:outgoing>
+      <bpmn:script>the_variable = "champion"</bpmn:script>
+    </bpmn:scriptTask>
+    <bpmn:sequenceFlow id="Flow_07vd2ar" sourceRef="StartEvent_1" targetRef="Activity_19x24om" />
+    <bpmn:endEvent id="Event_1f9iw7j">
+      <bpmn:incoming>Flow_1alkjjb</bpmn:incoming>
+    </bpmn:endEvent>
+    <bpmn:sequenceFlow id="Flow_1alkjjb" sourceRef="Activity_19x24om" targetRef="Event_1f9iw7j" />
+  </bpmn:process>
+  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
+    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="Process_bd2e724">
+      <bpmndi:BPMNEdge id="Flow_07vd2ar_di" bpmnElement="Flow_07vd2ar">
+        <di:waypoint x="215" y="177" />
+        <di:waypoint x="290" y="177" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNEdge id="Flow_1alkjjb_di" bpmnElement="Flow_1alkjjb">
+        <di:waypoint x="390" y="177" />
+        <di:waypoint x="442" y="177" />
+      </bpmndi:BPMNEdge>
+      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
+        <dc:Bounds x="179" y="159" width="36" height="36" />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Activity_0p4ehi1_di" bpmnElement="Activity_19x24om">
+        <dc:Bounds x="290" y="137" width="100" height="80" />
+        <bpmndi:BPMNLabel />
+      </bpmndi:BPMNShape>
+      <bpmndi:BPMNShape id="Event_1f9iw7j_di" bpmnElement="Event_1f9iw7j">
+        <dc:Bounds x="442" y="159" width="36" height="36" />
+      </bpmndi:BPMNShape>
+    </bpmndi:BPMNPlane>
+  </bpmndi:BPMNDiagram>
+</bpmn:definitions>

cypress/support/commands.js

@@ -53,6 +53,10 @@ Cypress.Commands.add('createModel', (groupId, modelId, modelDisplayName) => {
   cy.contains(`Process Model: ${modelId}`);
 });
 
+Cypress.Commands.add('runPrimaryBpmnFile', (expectedText) => {
+  cy.contains('Run Primary').click();
+  cy.contains(expectedText);
+});
 
 Cypress.Commands.add('basicPaginationTest', () => {
   cy.get("#pagination-page-dropdown")

public/sample.bpmn

@@ -1,59 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<bpmn:definitions xmlns:bpmn="http://www.omg.org/spec/BPMN/20100524/MODEL" xmlns:bpmndi="http://www.omg.org/spec/BPMN/20100524/DI" xmlns:dc="http://www.omg.org/spec/DD/20100524/DC" xmlns:di="http://www.omg.org/spec/DD/20100524/DI" xmlns:camunda="http://camunda.org/schema/1.0/bpmn" xmlns:modeler="http://camunda.org/schema/modeler/1.0" id="Definitions_1ny7jp4" targetNamespace="http://bpmn.io/schema/bpmn" exporter="Camunda Modeler" exporterVersion="5.0.0" modeler:executionPlatform="Camunda Platform" modeler:executionPlatformVersion="7.17.0">
-  <bpmn:process id="sample" isExecutable="true">
-    <bpmn:startEvent id="StartEvent_1">
-      <bpmn:outgoing>Flow_10jwwqy</bpmn:outgoing>
-    </bpmn:startEvent>
-    <bpmn:sequenceFlow id="Flow_10jwwqy" sourceRef="StartEvent_1" targetRef="Activity_0pxf6g1" />
-    <bpmn:endEvent id="Event_1qb1u6a">
-      <bpmn:incoming>Flow_1hd6o66</bpmn:incoming>
-    </bpmn:endEvent>
-    <bpmn:sequenceFlow id="Flow_0htxke7" sourceRef="Activity_0pxf6g1" targetRef="Activity_0a21ntf" />
-    <bpmn:scriptTask id="Activity_0pxf6g1" name="My Script">
-      <bpmn:incoming>Flow_10jwwqy</bpmn:incoming>
-      <bpmn:outgoing>Flow_0htxke7</bpmn:outgoing>
-      <bpmn:script>my_var = "Hello World"
-Mike = "Awesome"
-person = "Kevin"</bpmn:script>
-    </bpmn:scriptTask>
-    <bpmn:sequenceFlow id="Flow_1hd6o66" sourceRef="Activity_0a21ntf" targetRef="Event_1qb1u6a" />
-    <bpmn:businessRuleTask id="Activity_0a21ntf" name="is wonderful?" camunda:decisionRef="wonderful">
-      <bpmn:incoming>Flow_0htxke7</bpmn:incoming>
-      <bpmn:outgoing>Flow_1hd6o66</bpmn:outgoing>
-    </bpmn:businessRuleTask>
-  </bpmn:process>
-  <bpmndi:BPMNDiagram id="BPMNDiagram_1">
-    <bpmndi:BPMNPlane id="BPMNPlane_1" bpmnElement="sample">
-      <bpmndi:BPMNEdge id="Flow_1hd6o66_di" bpmnElement="Flow_1hd6o66">
-        <di:waypoint x="600" y="230" />
-        <di:waypoint x="656" y="230" />
-        <di:waypoint x="656" y="110" />
-        <di:waypoint x="802" y="110" />
-      </bpmndi:BPMNEdge>
-      <bpmndi:BPMNEdge id="Flow_0htxke7_di" bpmnElement="Flow_0htxke7">
-        <di:waypoint x="340" y="120" />
-        <di:waypoint x="420" y="120" />
-        <di:waypoint x="420" y="230" />
-        <di:waypoint x="500" y="230" />
-      </bpmndi:BPMNEdge>
-      <bpmndi:BPMNEdge id="Flow_10jwwqy_di" bpmnElement="Flow_10jwwqy">
-        <di:waypoint x="188" y="120" />
-        <di:waypoint x="240" y="120" />
-      </bpmndi:BPMNEdge>
-      <bpmndi:BPMNShape id="_BPMNShape_StartEvent_2" bpmnElement="StartEvent_1">
-        <dc:Bounds x="152" y="102" width="36" height="36" />
-      </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="Event_1qb1u6a_di" bpmnElement="Event_1qb1u6a">
-        <dc:Bounds x="802" y="92" width="36" height="36" />
-      </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="Activity_17ohe7r_di" bpmnElement="Activity_0pxf6g1">
-        <dc:Bounds x="240" y="80" width="100" height="80" />
-        <bpmndi:BPMNLabel />
-      </bpmndi:BPMNShape>
-      <bpmndi:BPMNShape id="Activity_06nka7s_di" bpmnElement="Activity_0a21ntf">
-        <dc:Bounds x="500" y="190" width="100" height="80" />
-        <bpmndi:BPMNLabel />
-      </bpmndi:BPMNShape>
-    </bpmndi:BPMNPlane>
-  </bpmndi:BPMNDiagram>
-</bpmn:definitions>

src/components/FileInput.js

@@ -13,7 +13,7 @@ export default class FileInput extends React.Component {
 
   handleSubmit(event) {
     event.preventDefault()
-    const url = `${BACKEND_BASE_URL}/process-models/${this.props.processModel.id}/file`;
+    const url = `${BACKEND_BASE_URL}/process-models/${this.props.processModel.process_group_id}/${this.props.processModel.id}/file`;
     const formData = new FormData();
     formData.append('file', this.fileInput.current.files[0]);
     formData.append('fileName', this.fileInput.current.files[0].name);

src/index.js

@@ -23,6 +23,7 @@ import ProcessInstanceList from "./routes/ProcessInstanceList"
 import ProcessInstanceReport from "./routes/ProcessInstanceReport"
 import ProcessModelNew from "./routes/ProcessModelNew"
 import ProcessModelEdit from "./routes/ProcessModelEdit"
+import ProcessInstanceShow from "./routes/ProcessInstanceShow"
 import ErrorBoundary from "./components/ErrorBoundary"
 
 import { Container } from 'react-bootstrap'
@@ -49,6 +50,7 @@ root.render(
             <Route path="process-models/:process_group_id/:process_model_id/process-instances" element={<ProcessInstanceList />} />
             <Route path="process-models/:process_group_id/:process_model_id/process-instances/report" element={<ProcessInstanceReport />} />
             <Route path="process-models/:process_group_id/:process_model_id/edit" element={<ProcessModelEdit />} />
+            <Route path="process-models/:process_group_id/:process_model_id/process-instances/:process_instance_id" element={<ProcessInstanceShow />} />
           </Routes>
         </BrowserRouter>
       </ErrorBoundary>

src/routes/ProcessGroupShow.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { Link, useSearchParams, useNavigate } from "react-router-dom";
+import { Link, useSearchParams } from "react-router-dom";
 import { BACKEND_BASE_URL } from '../config';
 import { HOT_AUTH_TOKEN } from '../config';
 import { useParams } from "react-router-dom";
@@ -10,7 +10,6 @@ import PaginationForTable, { DEFAULT_PER_PAGE, DEFAULT_PAGE } from '../component
 export default function ProcessGroupShow() {
   const params = useParams();
   const [searchParams] = useSearchParams();
-  const navigate = useNavigate();
 
   const [processGroup, setProcessGroup] = useState(null);
   const [processModels, setProcessModels] = useState([]);

src/routes/ProcessInstanceList.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useParams, useSearchParams } from "react-router-dom";
+import { Link, useParams, useSearchParams } from "react-router-dom";
 
 import { BACKEND_BASE_URL } from '../config';
 import { HOT_AUTH_TOKEN } from '../config';
@@ -14,7 +14,6 @@ export default function ProcessInstanceList() {
 
   const [processInstances, setProcessInstances] = useState([]);
   const [pagination, setPagination] = useState(null);
-  const [processGroupId, setProcessGroupId] = useState(null);
 
   useEffect(() => {
     getProcessInstances();
@@ -33,9 +32,6 @@ export default function ProcessInstanceList() {
             const processInstancesFromApi = result.results;
             setProcessInstances(processInstancesFromApi);
             setPagination(result.pagination);
-            if (processInstancesFromApi[0]) {
-              setProcessGroupId(processInstancesFromApi[0].process_group_id)
-            }
           },
           (error) => {
             console.log(error);
@@ -56,7 +52,9 @@ export default function ProcessInstanceList() {
         }
         return (
           <tr key={i}>
-          <td>{row.id}</td>
+          <td>
+            <Link data-qa="process-instance-show-link" to={`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${row.id}`}>{row.id}</Link>
+          </td>
           <td>{row.process_model_identifier}</td>
           <td>{row.process_group_id}</td>
           <td>{start_date.toString()}</td>
@@ -91,7 +89,7 @@ export default function ProcessInstanceList() {
       <main>
       <ProcessBreadcrumb
         processModelId={params.process_model_id}
-        processGroupId={processGroupId}
+        processGroupId={params.process_group_id}
         linkProcessModel="true"
       />
       <h2>Process Instances for {params.process_model_id}</h2>

src/routes/ProcessInstanceShow.js

@@ -0,0 +1,43 @@
+import React, { useEffect, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
+import { BACKEND_BASE_URL, HOT_AUTH_TOKEN } from '../config';
+import { Button } from 'react-bootstrap'
+import ProcessBreadcrumb from '../components/ProcessBreadcrumb'
+
+export default function ProcessInstanceShow(props) {
+  const [error, setError] = useState(null);
+  const navigate = useNavigate();
+  const params = useParams();
+
+  useEffect(() => {
+  }, []);
+
+  const deleteProcessInstance = (() => {
+    fetch(`${BACKEND_BASE_URL}/process-models/${params.process_group_id}/${params.process_model_id}/process-instances/${params.process_instance_id}`, {
+      headers: new Headers({
+        'Authorization': `Bearer ${HOT_AUTH_TOKEN}`
+      }),
+      method: 'DELETE',
+    })
+      .then(res => res.json())
+      .then(
+        (result) => {
+          navigate(`/process-models/${params.process_group_id}/${params.process_model_id}/process-instances`);
+        },
+        (error) => {
+          console.log(error);
+        }
+      )
+  });
+
+  return (
+    <main style={{ padding: "1rem 0" }}>
+      <ProcessBreadcrumb
+        processModelId={params.process_model_id}
+        processGroupId={params.process_group_id}
+        linkProcessModel="true"
+      />
+      <Button onClick={deleteProcessInstance} variant="danger">Delete process instance</Button>
+    </main>
+  )
+}