diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx index 1a5c751f7..c4be154cf 100644 --- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx +++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx @@ -25,6 +25,7 @@ import { ProcessReference, } from '../interfaces'; import ProcessSearch from '../components/ProcessSearch'; +import { Notification } from '../components/Notification'; export default function ProcessModelEditDiagram() { const [showFileNameEditor, setShowFileNameEditor] = useState(false); @@ -157,6 +158,8 @@ export default function ProcessModelEditDiagram() { } }; + const [displaySaveFileMessage, setDisplaySaveFileMessage] = + useState(false); const saveDiagram = (bpmnXML: any, fileName = params.file_name) => { setErrorMessage(null); setBpmnXmlForDiagramRendering(bpmnXML); @@ -192,6 +195,7 @@ export default function ProcessModelEditDiagram() { // after saving the file, make sure we null out newFileName // so it does not get used over the params setNewFileName(''); + setDisplaySaveFileMessage(true); }; const onDeleteFile = (fileName = params.file_name) => { @@ -836,6 +840,20 @@ export default function ProcessModelEditDiagram() { ); }; + const saveFileMessage = () => { + if (displaySaveFileMessage) { + return ( + setDisplaySaveFileMessage(false)} + > + Changes to the file were saved. + + ); + } + return null; + }; + // 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 : ''; @@ -856,6 +874,7 @@ export default function ProcessModelEditDiagram() { Process Model File{processModelFile ? ': ' : ''} {processModelFileName} + {saveFileMessage()} {appropriateEditor()} {newFileNameBox()} {scriptEditor()}