process model cypress tests are passing w/ burnettk

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

@@ -99,7 +99,7 @@ describe('process-models', () => {
     cy.contains(/^Process Model File$/);
     // Some reason, cypress evals json strings so we have to escape it it with '{{}'
     cy.get('.view-line').type('{{} "test_key": "test_value" }');
-    cy.contains('Save').click();
+    cy.getBySel('file-save-button').click();
     cy.get('input[name=file_name]').type(jsonFileName);
     cy.contains('Save Changes').click();
     cy.contains(`Process Model File: ${jsonFileName}`);
@@ -168,12 +168,8 @@ describe('process-models', () => {
   });
 
   it('can allow searching for model', () => {
-    cy.get('[name=process-model-selection]').click();
+    cy.getBySel('process-model-selection').click().type('model-3');
-    cy.get('[name=process-model-selection]').type('model-3');
+    cy.contains('acceptance-tests-group-one/acceptance-tests-model-3').click();
-    cy.get(
+    cy.contains('List').click();
-      `[aria-label="acceptance-tests-group-one/acceptance-tests-model-3"]`
-    ).click();
-
-    cy.contains('Process Instances').click();
   });
 });

spiffworkflow-frontend/src/components/ButtonWithConfirmation.tsx

@@ -45,30 +45,11 @@ export default function ButtonWithConfirmation({
         onRequestSubmit={handleConfirmation}
       />
     );
-    // return (
-    //   <Modal
-    //     show={showConfirmationPrompt}
-    //     onHide={handleConfirmationPromptCancel}
-    //   >
-    //     <Modal.Header closeButton>
-    //       <Modal.Title>{title}</Modal.Title>
-    //     </Modal.Header>
-    //     {modalBodyElement()}
-    //     <Modal.Footer>
-    //       <Button variant="secondary" onClick={handleConfirmationPromptCancel}>
-    //         Cancel
-    //       </Button>
-    //       <Button variant="primary" onClick={handleConfirmation}>
-    //         {confirmButtonLabel}
-    //       </Button>
-    //     </Modal.Footer>
-    //   </Modal>
-    // );
   };
 
   return (
     <>
-      <Button onClick={handleShowConfirmationPrompt} variant="danger">
+      <Button onClick={handleShowConfirmationPrompt} kind="danger">
         {buttonLabel}
       </Button>
       {confirmationDialog()}

spiffworkflow-frontend/src/components/ProcessModelSearch.tsx

@@ -29,6 +29,7 @@ export default function ProcessModelSearch({
     <ComboBox
       onChange={onChange}
       id="process-model-select"
+      data-qa="process-model-selection"
       items={processModels}
       itemToString={(processModel: ProcessModel) => {
         if (processModel) {

spiffworkflow-frontend/src/components/ReactDiagramEditor.tsx

@@ -18,7 +18,8 @@ import {
 } from 'dmn-js-properties-panel';
 
 import React, { useRef, useEffect, useState } from 'react';
-import Button from 'react-bootstrap/Button';
+// @ts-ignore
+import { Button } from '@carbon/react';
 
 import 'bpmn-js/dist/assets/diagram-js.css';
 import 'bpmn-js/dist/assets/bpmn-font/css/bpmn-embedded.css';

spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx

@@ -194,31 +194,25 @@ export default function ProcessModelEditDiagram() {
   const newFileNameBox = () => {
     const fileExtension = `.${searchParams.get('file_type')}`;
     return (
-      <Modal show={showFileNameEditor} onHide={handleFileNameCancel}>
+      <Modal
-        <Modal.Header closeButton>
+        open={showFileNameEditor}
-          <Modal.Title>Process Model File Name</Modal.Title>
+        modalHeading="Processs Model File Name"
-        </Modal.Header>
+        primaryButtonText="Save Changes"
-        <form onSubmit={handleFileNameSave}>
+        secondaryButtonText="Cancel"
-          <label>File Name:</label>
+        onSecondarySubmit={handleFileNameCancel}
-          <span>
+        onRequestSubmit={handleFileNameSave}
-            <input
+      >
-              name="file_name"
+        <label>File Name:</label>
-              type="text"
+        <span>
-              value={newFileName}
+          <input
-              onChange={(e) => setNewFileName(e.target.value)}
+            name="file_name"
-              autoFocus
+            type="text"
-            />
+            value={newFileName}
-            {fileExtension}
+            onChange={(e) => setNewFileName(e.target.value)}
-          </span>
+            autoFocus
-          <Modal.Footer>
+          />
-            <Button variant="secondary" onClick={handleFileNameCancel}>
+          {fileExtension}
-              Cancel
+        </span>
-            </Button>
-            <Button variant="primary" type="submit">
-              Save Changes
-            </Button>
-          </Modal.Footer>
-        </form>
       </Modal>
     );
   };

spiffworkflow-frontend/src/routes/ReactFormEditor.tsx

@@ -119,31 +119,25 @@ export default function ReactFormEditor() {
 
   const newFileNameBox = () => {
     return (
-      <Modal show={showFileNameEditor} onHide={handleFileNameCancel}>
+      <Modal
-        <Modal.Header closeButton>
+        open={showFileNameEditor}
-          <Modal.Title>Process Model File Name</Modal.Title>
+        modalHeading="Processs Model File Name"
-        </Modal.Header>
+        primaryButtonText="Save Changes"
-        <form onSubmit={handleFileNameSave}>
+        secondaryButtonText="Cancel"
-          <label>File Name:</label>
+        onSecondarySubmit={handleFileNameCancel}
-          <span>
+        onRequestSubmit={handleFileNameSave}
-            <input
+      >
-              name="file_name"
+        <label>File Name:</label>
-              type="text"
+        <span>
-              value={newFileName}
+          <input
-              onChange={(e) => setNewFileName(e.target.value)}
+            name="file_name"
-              autoFocus
+            type="text"
-            />
+            value={newFileName}
-            .{fileExtension}
+            onChange={(e) => setNewFileName(e.target.value)}
-          </span>
+            autoFocus
-          <Modal.Footer>
+          />
-            <Button variant="secondary" onClick={handleFileNameCancel}>
+          {fileExtension}
-              Cancel
+        </span>
-            </Button>
-            <Button variant="primary" type="submit">
-              Save Changes
-            </Button>
-          </Modal.Footer>
-        </form>
       </Modal>
     );
   };
@@ -161,7 +155,7 @@ export default function ReactFormEditor() {
           {processModelFile ? `: ${(processModelFile as any).name}` : ''}
         </h2>
         {newFileNameBox()}
-        <Button onClick={saveFile} variant="danger">
+        <Button onClick={saveFile} variant="danger" data-qa="file-save-button">
           Save
         </Button>
         {params.file_name ? (