fix process model create and a couple tests, docker build refactor

spiffworkflow-frontend/Dockerfile

@@ -1,19 +1,23 @@
 ### STAGE 1: Build ###
 FROM quay.io/sartography/node:latest
+
 RUN mkdir /app
 WORKDIR /app
-ADD package.json /app/
-ADD package-lock.json /app/
-COPY . /app/
 
 # this matches total memory on spiffworkflow-demo
 ENV NODE_OPTIONS=--max_old_space_size=2048
 
+ADD package.json /app/
+ADD package-lock.json /app/
+
 # npm ci because it respects the lock file.
 # --ignore-scripts because authors can do bad things in postinstall scripts.
 # https://cheatsheetseries.owasp.org/cheatsheets/NPM_Security_Cheat_Sheet.html
 # npx can-i-ignore-scripts can check that it's safe to ignore scripts.
 RUN npm ci --ignore-scripts
+
+COPY . /app/
+
 RUN npm run build
 
 ENTRYPOINT ["/app/bin/boot_server_in_docker"]

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

@@ -26,7 +26,8 @@ describe('process-models', () => {
     cy.contains('Edit process model').click();
     cy.get('input[name=display_name]').clear().type(newModelDisplayName);
     cy.contains('Submit').click();
-    cy.contains(`Process Model: ${modelId}`);
+    const modifiedModelId = cy.modifyProcessModelPath(modelId);
+    cy.contains(`Process Model: ${modifiedModelId}`);
 
     cy.contains('Edit process model').click();
     cy.get('input[name=display_name]').should(
@@ -55,18 +56,19 @@ describe('process-models', () => {
 
     cy.contains(groupDisplayName).click();
     cy.createModel(groupId, modelId, modelDisplayName);
-    cy.contains(`Process Group: ${groupId}`).click();
+    cy.contains(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.getBySel('files-accordion').click();
     cy.contains(`${bpmnFileName}.bpmn`).should('not.exist');
     cy.contains(`${dmnFileName}.dmn`).should('not.exist');
     cy.contains(`${jsonFileName}.json`).should('not.exist');
 
     // add new bpmn file
-    cy.contains('Add New BPMN File').click();
+    cy.contains('New BPMN File').click();
     cy.contains(/^Process Model File$/);
     cy.get('g[data-element-id=StartEvent_1]').click().should('exist');
     cy.contains('General').click();
@@ -78,11 +80,12 @@ describe('process-models', () => {
     cy.contains('Save Changes').click();
     cy.contains(`Process Model File: ${bpmnFileName}`);
     cy.contains(modelId).click();
-    cy.contains(`Process Model: ${modelId}`);
+    cy.contains(`Process Model: ${modelDisplayName}`);
+    cy.getBySel('files-accordion').click();
     cy.contains(`${bpmnFileName}.bpmn`).should('exist');
 
     // add new dmn file
-    cy.contains('Add New DMN File').click();
+    cy.contains('New DMN File').click();
     cy.contains(/^Process Model File$/);
     cy.get('g[data-element-id=decision_1]').click().should('exist');
     cy.contains('General').click();
@@ -91,11 +94,12 @@ describe('process-models', () => {
     cy.contains('Save Changes').click();
     cy.contains(`Process Model File: ${dmnFileName}`);
     cy.contains(modelId).click();
-    cy.contains(`Process Model: ${modelId}`);
+    cy.contains(`Process Model: ${modelDisplayName}`);
+    cy.getBySel('files-accordion').click();
     cy.contains(`${dmnFileName}.dmn`).should('exist');
 
     // add new json file
-    cy.contains('Add New JSON File').click();
+    cy.contains('New JSON File').click();
     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" }');
@@ -106,7 +110,8 @@ describe('process-models', () => {
     // wait for json to load before clicking away to avoid network errors
     cy.wait(500);
     cy.contains(modelId).click();
-    cy.contains(`Process Model: ${modelId}`);
+    cy.contains(`Process Model: ${modelDisplayName}`);
+    cy.getBySel('files-accordion').click();
     cy.contains(`${jsonFileName}.json`).should('exist');
 
     cy.contains('Edit process model').click();

spiffworkflow-frontend/cypress/support/commands.js

@@ -76,8 +76,8 @@ Cypress.Commands.add('createModel', (groupId, modelId, modelDisplayName) => {
   cy.get('input[name=id]').should('have.value', modelId);
   cy.contains('Submit').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}`);
 });
 
 Cypress.Commands.add('runPrimaryBpmnFile', (reload = true) => {
@@ -120,3 +120,7 @@ Cypress.Commands.add('assertAtLeastOneItemInPaginatedResults', () => {
 Cypress.Commands.add('assertNoItemInPaginatedResults', () => {
   cy.getBySel('total-paginated-items').contains('0');
 });
+
+Cypress.Commands.add('modifyProcessModelPath', (path) => {
+  return path.replace('/', ':') || '';
+});

spiffworkflow-frontend/package-lock.json

@@ -7890,9 +7890,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001418",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz",
-      "integrity": "sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==",
+      "version": "1.0.30001431",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
+      "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -36070,9 +36070,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001418",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz",
-      "integrity": "sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg=="
+      "version": "1.0.30001431",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001431.tgz",
+      "integrity": "sha512-zBUoFU0ZcxpvSt9IU66dXVT/3ctO1cy4y9cscs1szkPlcWb6pasYM144GqrUygUbT+k7cmUCW61cvskjcv0enQ=="
     },
     "case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",

spiffworkflow-frontend/src/components/ProcessModelForm.tsx

@@ -14,12 +14,14 @@ import ButtonWithConfirmation from './ButtonWithConfirmation';
 type OwnProps = {
   mode: string;
   processModel: ProcessModel;
+  process_group_id?: string;
   setProcessModel: (..._args: any[]) => any;
 };
 
 export default function ProcessModelForm({
   mode,
   processModel,
+  process_group_id,
   setProcessModel,
 }: OwnProps) {
   const [identifierInvalid, setIdentifierInvalid] = useState<boolean>(false);
@@ -29,9 +31,12 @@ export default function ProcessModelForm({
   const navigate = useNavigate();
   const modifiedProcessModelPath = modifyProcessModelPath(processModel.id);
 
-  const navigateToProcessModel = (_result: any) => {
-    if (processModel) {
-      navigate(`/admin/process-models/${modifiedProcessModelPath}`);
+  const navigateToProcessModel = (result: ProcessModel) => {
+    if ('id' in result) {
+      const modifiedProcessModelPathFromResult = modifyProcessModelPath(
+        result.id
+      );
+      navigate(`/admin/process-models/${modifiedProcessModelPathFromResult}`);
     }
   };
 
@@ -83,7 +88,7 @@ export default function ProcessModelForm({
     };
     if (mode === 'new') {
       Object.assign(postBody, {
-        id: processModel.id,
+        id: `${process_group_id}/${processModel.id}`,
       });
     }
 

spiffworkflow-frontend/src/routes/ProcessModelEdit.tsx

@@ -24,6 +24,7 @@ export default function ProcessModelEdit() {
         <h2>Edit Process Model: {(processModel as any).id}</h2>
         <ProcessModelForm
           mode="edit"
+          process_group_id={params.process_group_id}
           processModel={processModel}
           setProcessModel={setProcessModel}
         />

spiffworkflow-frontend/src/routes/ProcessModelNew.tsx

@@ -1,9 +1,11 @@
 import { useState } from 'react';
+import { useParams } from 'react-router-dom';
 import ProcessBreadcrumb from '../components/ProcessBreadcrumb';
 import { ProcessModel } from '../interfaces';
 import ProcessModelForm from '../components/ProcessModelForm';
 
 export default function ProcessModelNew() {
+  const params = useParams();
   const [processModel, setProcessModel] = useState<ProcessModel>({
     id: '',
     display_name: '',
@@ -18,6 +20,7 @@ export default function ProcessModelNew() {
       <h2>Add Process Model</h2>
       <ProcessModelForm
         mode="new"
+        process_group_id={params.process_group_id}
         processModel={processModel}
         setProcessModel={setProcessModel}
       />