process model cypress tests are passing

spiffworkflow-frontend/cypress/e2e/process_models.cy.js

@@ -16,20 +16,14 @@ describe('process-models', () => {
     const modelId = `test-model-2-${id}`;
     cy.contains(groupDisplayName).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.url().should('include', `process-models/${groupId}:${modelId}`);
+    cy.contains(`Process Model: ${modelDisplayName}`);
 
     cy.contains('Edit process model').click();
     cy.get('input[name=display_name]').clear().type(newModelDisplayName);
     cy.contains('Submit').click();
-    const modifiedModelId = cy.modifyProcessModelPath(modelId);
-    cy.contains(`Process Model: ${modifiedModelId}`);
-
-    cy.contains('Edit process model').click();
+    cy.contains(`Process Model: ${groupId}/${modelId}`);
+    cy.contains('Submit').click();
     cy.get('input[name=display_name]').should(
       'have.value',
       newModelDisplayName
@@ -37,7 +31,7 @@ describe('process-models', () => {
 
     cy.contains('Delete').click();
     cy.contains('Are you sure');
-    cy.contains('OK').click();
+    cy.getBySel('modal-confirmation-dialog').find('.cds--btn--danger').click();
     cy.url().should('include', `process-groups/${groupId}`);
     cy.contains(modelId).should('not.exist');
   });
@@ -57,8 +51,6 @@ describe('process-models', () => {
     cy.contains(groupDisplayName).click();
     cy.createModel(groupId, modelId, modelDisplayName);
     cy.contains(groupId).click();
-    cy.contains(modelId);
-
     cy.contains(modelId).click();
     cy.url().should('include', `process-models/${groupId}:${modelId}`);
     cy.contains(`Process Model: ${modelDisplayName}`);
@@ -117,7 +109,7 @@ describe('process-models', () => {
     cy.contains('Edit process model').click();
     cy.contains('Delete').click();
     cy.contains('Are you sure');
-    cy.contains('OK').click();
+    cy.getBySel('modal-confirmation-dialog').find('.cds--btn--danger').click();
     cy.url().should('include', `process-groups/${groupId}`);
     cy.contains(modelId).should('not.exist');
   });
@@ -133,36 +125,35 @@ describe('process-models', () => {
     cy.contains(groupDisplayName).click();
     cy.createModel(groupId, modelId, modelDisplayName);
 
-    // seeing if getBySel works better, because we are seeing tests fail in CI
-    // when looking for the "Add a process model" link, so it seems like the
-    // click on the breadcrumb element must have failed.
-    cy.getBySel('process-group-breadcrumb-link').click();
-    // cy.contains(`Process Group: ${groupId}`).click();
-
+    cy.contains(`${groupId}`).click();
     cy.contains('Add a process model');
-
     cy.contains(modelId).click();
-    cy.url().should('include', `process-models/${groupId}/${modelId}`);
-    cy.contains(`Process Model: ${modelId}`);
+    cy.url().should('include', `process-models/${groupId}:${modelId}`);
+    cy.contains(`Process Model: ${modelDisplayName}`);
 
-    cy.get('input[type=file]').selectFile(
+    cy.getBySel('files-accordion').click();
+    cy.getBySel('upload-file-button').click();
+    cy.contains('Add file').selectFile(
       'cypress/fixtures/test_bpmn_file_upload.bpmn'
     );
-    cy.contains('Submit').click();
+    cy.getBySel('modal-upload-file-dialog')
+      .find('.cds--btn--primary')
+      .contains('Upload')
+      .click();
     cy.runPrimaryBpmnFile();
 
     cy.getBySel('process-instance-list-link').click();
     cy.getBySel('process-instance-show-link').click();
     cy.contains('Delete').click();
     cy.contains('Are you sure');
-    cy.contains('OK').click();
+    cy.getBySel('modal-confirmation-dialog').find('.cds--btn--danger').click();
     cy.contains(`Process Instances for: ${groupId}/${modelId}`);
     cy.contains(modelId).click();
 
     cy.contains('Edit process model').click();
     cy.contains('Delete').click();
     cy.contains('Are you sure');
-    cy.contains('OK').click();
+    cy.getBySel('modal-confirmation-dialog').find('.cds--btn--danger').click();
     cy.url().should('include', `process-groups/${groupId}`);
     cy.contains(modelId).should('not.exist');
   });

spiffworkflow-frontend/cypress/support/commands.js

@@ -122,5 +122,6 @@ Cypress.Commands.add('assertNoItemInPaginatedResults', () => {
 });
 
 Cypress.Commands.add('modifyProcessModelPath', (path) => {
-  return path.replace('/', ':') || '';
+  path.replace('/', ':');
+  return path;
 });

spiffworkflow-frontend/src/helpers.tsx

@@ -95,13 +95,10 @@ export const getProcessModelFullIdentifierFromSearchParams = (
   searchParams: any
 ) => {
   let processModelFullIdentifier = null;
-  if (
-    searchParams.get('process_model_identifier') &&
-    searchParams.get('process_group_identifier')
-  ) {
+  if (searchParams.get('process_model_identifier')) {
     processModelFullIdentifier = `${searchParams.get(
-      'process_group_identifier'
-    )}/${searchParams.get('process_model_identifier')}`;
+      'process_model_identifier'
+    )}`;
   }
   return processModelFullIdentifier;
 };
@@ -116,19 +113,19 @@ export const truncateString = (text: string, len: number) => {
 
 // Because of limitations in the way openapi defines parameters, we have to modify process models ids
 // which are basically paths to the models
-export const modifyProcessModelPath = (path: String) => {
+export const modifyProcessModelPath = (path: string) => {
   return path.replace('/', ':') || '';
 };
 
-export const unModifyProcessModelPath = (path: String) => {
+export const unModifyProcessModelPath = (path: string) => {
   return path.replace(':', '/') || '';
 };
 
-export const getGroupFromModifiedModelId = (modifiedId: String) => {
+export const getGroupFromModifiedModelId = (modifiedId: string) => {
   const finalSplitIndex = modifiedId.lastIndexOf(':');
   return modifiedId.slice(0, finalSplitIndex);
 };
 
-export const splitProcessModelId = (processModelId: String) => {
+export const splitProcessModelId = (processModelId: string) => {
   return processModelId.split('/');
 };

spiffworkflow-frontend/src/routes/ProcessInstanceList.tsx

@@ -461,7 +461,11 @@ export default function ProcessInstanceList() {
     return (
       <h2>
         Process Instances for:{' '}
-        <Link to={`/admin/process-models/${processModelFullIdentifier}`}>
+        <Link
+          to={`/admin/process-models/${modifyProcessModelPath(
+            processModelFullIdentifier
+          )}`}
+        >
           {processModelFullIdentifier}
         </Link>
       </h2>

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -776,9 +776,7 @@ 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}`
-      : '';
+    const processModelFileName = processModelFile ? processModelFile.name : '';
     return (
       <>
         <ProcessBreadcrumb
@@ -792,7 +790,7 @@ export default function ProcessModelEditDiagram() {
           ]}
         />
         <h2>
-          Process Model File
+          Process Model File{processModelFile ? ': ' : ''}
           {processModelFileName}
         </h2>
         {appropriateEditor()}

spiffworkflow-frontend/src/routes/ProcessModelShow.tsx

@@ -400,13 +400,14 @@ export default function ProcessModelShow() {
         httpMethod: 'POST',
         postBody: formData,
       });
-      setShowFileUploadModal(false);
     }
+    setShowFileUploadModal(false);
   };
 
   const fileUploadModal = () => {
     return (
       <Modal
+        data-qa="modal-upload-file-dialog"
         open={showFileUploadModal}
         modalHeading="Upload File"
         primaryButtonText="Upload"
@@ -455,6 +456,7 @@ export default function ProcessModelShow() {
           <ButtonSet>
             <Button
               renderIcon={Upload}
+              data-qa="upload-file-button"
               onClick={() => setShowFileUploadModal(true)}
               size="sm"
               kind=""

spiffworkflow-frontend/src/routes/ReactFormEditor.tsx

@@ -6,7 +6,8 @@ import { Button, Modal } from '@carbon/react';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import HttpService from '../services/HttpService';
 import ButtonWithConfirmation from '../components/ButtonWithConfirmation';
-import { modifyProcessModelPath } from '../helpers';
+import { modifyProcessModelPath, unModifyProcessModelPath } from '../helpers';
+import { ProcessFile } from '../interfaces';
 
 // NOTE: This is mostly the same as ProcessModelEditDiagram and if we go this route could
 // possibly be merged into it. I'm leaving as a separate file now in case it does
@@ -19,7 +20,9 @@ export default function ReactFormEditor() {
   const handleShowFileNameEditor = () => setShowFileNameEditor(true);
   const navigate = useNavigate();
 
-  const [processModelFile, setProcessModelFile] = useState(null);
+  const [processModelFile, setProcessModelFile] = useState<ProcessFile | null>(
+    null
+  );
   const [processModelFileContents, setProcessModelFileContents] = useState('');
 
   const fileExtension = (() => {
@@ -145,10 +148,8 @@ export default function ReactFormEditor() {
     );
   };
 
-  const processModelFilePossibleNameString = processModelFile
-    ? (processModelFile as any).name
-    : '';
   if (processModelFile || !params.file_name) {
+    const processModelFileName = processModelFile ? processModelFile.name : '';
     return (
       <main>
         <ProcessBreadcrumb
@@ -158,15 +159,19 @@ export default function ReactFormEditor() {
           hotCrumbs={[
             ['Process Groups', '/admin'],
             [
-              `Process Model: ${params.process_model_id}`,
-              `process_model:${params.process_model_id}:link`,
+              `Process Model: ${unModifyProcessModelPath(
+                params.process_model_id || ''
+              )}`,
+              `process_model:${unModifyProcessModelPath(
+                params.process_model_id || ''
+              )}:link`,
             ],
-            [processModelFilePossibleNameString],
+            [processModelFileName],
           ]}
         />
         <h2>
-          Process Model File
-          {processModelFile ? `: ${(processModelFile as any).name}` : ''}
+          Process Model File{processModelFile ? ': ' : ''}
+          {processModelFileName}
         </h2>
         {newFileNameBox()}
         <Button onClick={saveFile} variant="danger" data-qa="file-save-button">