fixed some acceptance tests w/ burnettk cullerton

cypress/e2e/process_instances.cy.js

@@ -68,6 +68,7 @@ describe('process-instances', () => {
     cy.login();
     cy.navigateToProcessModel(
       'Acceptance Tests Group One',
+      'Acceptance Tests Model 1',
       'acceptance-tests-model-1'
     );
   });
@@ -75,7 +76,7 @@ describe('process-instances', () => {
     cy.logout();
   });
 
-  it.only('can create a new instance and can modify', () => {
+  it('can create a new instance and can modify', () => {
     const originalDmnOutputForKevin = 'Very wonderful';
     const newDmnOutputForKevin = 'The new wonderful';
     const dmnOutputForDan = 'pretty wonderful';
@@ -90,28 +91,29 @@ describe('process-instances', () => {
     cy.runPrimaryBpmnFile();
 
     // Change dmn
-    cy.contains(dmnFile).click();
+    cy.getBySel('files-accordion').click();
-    cy.contains(`Process Model File: ${dmnFile}`);
+    cy.getBySel(`edit-file-${dmnFile.replace('.', '-')}`).click();
     updateDmnText(originalDmnOutputForKevin, newDmnOutputForKevin);
 
     cy.contains('acceptance-tests-model-1').click();
     cy.runPrimaryBpmnFile();
 
-    cy.contains(dmnFile).click();
+    cy.getBySel('files-accordion').click();
-    cy.contains(`Process Model File: ${dmnFile}`);
+    cy.getBySel(`edit-file-${dmnFile.replace('.', '-')}`).click();
     updateDmnText(newDmnOutputForKevin, originalDmnOutputForKevin);
     cy.contains('acceptance-tests-model-1').click();
     cy.runPrimaryBpmnFile();
 
     // Change bpmn
-    cy.contains(bpmnFile).click();
+    cy.getBySel('files-accordion').click();
+    cy.getBySel(`edit-file-${bpmnFile.replace('.', '-')}`).click();
     cy.contains(`Process Model File: ${bpmnFile}`);
     updateBpmnPythonScript(newPythonScript);
     cy.contains('acceptance-tests-model-1').click();
     cy.runPrimaryBpmnFile();
 
-    cy.contains(bpmnFile).click();
+    cy.getBySel('files-accordion').click();
-    cy.contains(`Process Model File: ${bpmnFile}`);
+    cy.getBySel(`edit-file-${bpmnFile.replace('.', '-')}`).click();
     updateBpmnPythonScript(originalPythonScript);
     cy.contains('acceptance-tests-model-1').click();
     cy.runPrimaryBpmnFile();
@@ -125,13 +127,15 @@ describe('process-instances', () => {
     const bpmnFile = 'process_model_one.bpmn';
 
     // Change bpmn
-    cy.contains(bpmnFile).click();
+    cy.getBySel('files-accordion').click();
+    cy.getBySel(`edit-file-${bpmnFile.replace('.', '-')}`).click();
     cy.contains(`Process Model File: ${bpmnFile}`);
     updateBpmnPythonScriptWithMonaco(newPythonScript);
     cy.contains('acceptance-tests-model-1').click();
     cy.runPrimaryBpmnFile();
 
-    cy.contains(bpmnFile).click();
+    cy.getBySel('files-accordion').click();
+    cy.getBySel(`edit-file-${bpmnFile.replace('.', '-')}`).click();
     cy.contains(`Process Model File: ${bpmnFile}`);
     updateBpmnPythonScriptWithMonaco(originalPythonScript);
     cy.contains('acceptance-tests-model-1').click();

cypress/e2e/tasks.cy.js

@@ -25,10 +25,11 @@ describe('tasks', () => {
   it('can complete and navigate a form', () => {
     const groupDisplayName = 'Acceptance Tests Group One';
     const modelId = `acceptance-tests-model-2`;
+    const modelDisplayName = `Acceptance Tests Model 2`;
     const completedTaskClassName = 'completed-task-highlight';
     const activeTaskClassName = 'active-task-highlight';
 
-    cy.navigateToProcessModel(groupDisplayName, modelId);
+    cy.navigateToProcessModel(groupDisplayName, modelDisplayName, modelId);
 
     // avoid reloading so we can click on the task link that appears on running the process instance
     cy.runPrimaryBpmnFile(false);
@@ -67,7 +68,7 @@ describe('tasks', () => {
     );
 
     cy.contains('Task: get_user_generated_number_four');
-    cy.navigateToProcessModel(groupDisplayName, modelId);
+    cy.navigateToProcessModel(groupDisplayName, modelDisplayName, modelId);
     cy.getBySel('process-instance-list-link').click();
     cy.assertAtLeastOneItemInPaginatedResults();
 
@@ -84,7 +85,7 @@ describe('tasks', () => {
     checkTaskHasClass('form2', completedTaskClassName);
     checkTaskHasClass('form3', completedTaskClassName);
     checkTaskHasClass('form4', activeTaskClassName);
-    cy.get('.modal .btn-close').click();
+    cy.get('.is-visible .cds--modal-close').click();
 
     cy.navigateToHome();
     cy.contains('Tasks').should('exist');
@@ -99,7 +100,7 @@ describe('tasks', () => {
     );
     cy.url().should('include', '/tasks');
 
-    cy.navigateToProcessModel(groupDisplayName, modelId);
+    cy.navigateToProcessModel(groupDisplayName, modelDisplayName, modelId);
     cy.getBySel('process-instance-list-link').click();
     cy.assertAtLeastOneItemInPaginatedResults();
 
@@ -112,6 +113,7 @@ describe('tasks', () => {
   it('can paginate items', () => {
     cy.navigateToProcessModel(
       'Acceptance Tests Group One',
+      'Acceptance Tests Model 2',
       'acceptance-tests-model-2'
     );
 

cypress/support/commands.js

@@ -91,13 +91,12 @@ Cypress.Commands.add('runPrimaryBpmnFile', (reload = true) => {
 
 Cypress.Commands.add(
   'navigateToProcessModel',
-  (groupDisplayName, modelDisplayName) => {
+  (groupDisplayName, modelDisplayName, modelIdentifier) => {
     cy.navigateToAdmin();
     cy.contains(groupDisplayName).click();
     cy.contains(`Process Group: ${groupDisplayName}`);
     // https://stackoverflow.com/q/51254946/6090676
-    cy.getBySel('process-model-show-link').contains(modelDisplayName).click();
+    cy.getBySel('process-model-show-link').contains(modelIdentifier).click();
-    // cy.url().should('include', `process-models/${groupDisplayName}/${modelDisplayName}`);
     cy.contains(`Process Model: ${modelDisplayName}`);
   }
 );
@@ -115,10 +114,7 @@ Cypress.Commands.add('basicPaginationTest', () => {
 });
 
 Cypress.Commands.add('assertAtLeastOneItemInPaginatedResults', () => {
-  cy.getBySel('total-paginated-items')
+  cy.contains(/\b[1-9]\d*–[1-9]\d* of [1-9]\d*/);
-    .invoke('text')
-    .then(parseFloat)
-    .should('be.gt', 0);
 });
 
 Cypress.Commands.add('assertNoItemInPaginatedResults', () => {

src/components/ProcessBreadcrumb.tsx

@@ -55,7 +55,10 @@ export default function ProcessBreadcrumb({
     const leadingCrumbLinks = hotCrumbs.map((crumb: any) => {
       const valueLabel = crumb[0];
       const url = crumb[1];
-      if (url.startsWith('process_model:')) {
+      if (!url) {
+        return <BreadcrumbItem isCurrentPage>{valueLabel}</BreadcrumbItem>;
+      }
+      if (url && url.startsWith('process_model:')) {
         return explodeCrumb(crumb);
       }
       return (

src/index.css

@@ -44,6 +44,14 @@ span.bjs-crumb {
   vertical-align: middle;
 }
 
+.cds--breadcrumb {
+  margin-bottom: 2em;
+}
+
+.process-description {
+  margin-bottom: 2em;
+}
+
 .diagram-editor-canvas {
   border:1px solid #000000;
   height:70vh;

src/index.scss

@@ -25,6 +25,21 @@
   // background-color: colors.$gray-100;
   color: white;
 }
+h1{
+  height: 36px;
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  font-size: 28px;
+  line-height: 36px;
+  color: #161616;
+  flex: none;
+  order: 0;
+  align-self: stretch;
+  flex-grow: 0;
+  margin-bottom: 1em
+}
+
 
 .cds--breadcrumb-item a.cds--link:hover {
   color: #525252;

src/routes/ProcessModelEditDiagram.tsx

@@ -77,7 +77,9 @@ export default function ProcessModelEditDiagram() {
   const [searchParams] = useSearchParams();
 
   const setErrorMessage = (useContext as any)(ErrorContext)[1];
-  const [processModelFile, setProcessModelFile] = useState(null);
+  const [processModelFile, setProcessModelFile] = useState<ProcessFile | null>(
+    null
+  );
   const [newFileName, setNewFileName] = useState('');
   const [bpmnXmlForDiagramRendering, setBpmnXmlForDiagramRendering] =
     useState(null);
@@ -774,16 +776,24 @@ export default function ProcessModelEditDiagram() {
 
   // if a file name is not given then this is a new model and the ReactDiagramEditor component will handle it
   if ((bpmnXmlForDiagramRendering || !params.file_name) && processModel) {
+    const processModelFileName = processModelFile
+      ? `: ${processModelFile.name}`
+      : '';
     return (
       <>
         <ProcessBreadcrumb
-          processGroupId={params.process_group_id}
+          hotCrumbs={[
-          processModelId={params.process_model_id}
+            ['Process Groups', '/admin'],
-          linkProcessModel
+            [
+              `Process Model: ${processModel.id}`,
+              `process_model:${processModel.id}:link`,
+            ],
+            [processModelFileName],
+          ]}
         />
         <h2>
           Process Model File
-          {processModelFile ? `: ${(processModelFile as any).name}` : ''}
+          {processModelFileName}
         </h2>
         {appropriateEditor()}
         {newFileNameBox()}

src/routes/ProcessModelShow.tsx

@@ -274,6 +274,7 @@ export default function ProcessModelShow() {
         iconDescription="Edit File"
         hasIconOnly
         size="lg"
+        data-qa={`edit-file-${processModelFile.name.replace('.', '-')}`}
         onClick={() => navigateToFileEdit(processModelFile)}
       />
     );
@@ -455,6 +456,7 @@ export default function ProcessModelShow() {
     return (
       <Accordion>
         <AccordionItem
+          data-qa="files-accordion"
           title={
             <Stack orientation="horizontal">
               <span>
@@ -524,8 +526,8 @@ export default function ProcessModelShow() {
             ],
           ]}
         />
-        <h1>{processModel.display_name}</h1>
+        <h1>Process Model: {processModel.display_name}</h1>
-        <p>{processModel.description}</p>
+        <p className="process-description">{processModel.description}</p>
         <Stack orientation="horizontal" gap={3}>
           <Button onClick={processInstanceCreateAndRun} variant="primary">
             Run