From c2a4d8480b6fec3882b687a3f0313d1a7eae4fb4 Mon Sep 17 00:00:00 2001
From: jasquat <jasquat@users.noreply.github.com>
Date: Tue, 24 Jan 2023 11:35:30 -0500
Subject: [PATCH] add process model file name validation for new files w/
 burnettk

---
 spiffworkflow-frontend/src/index.css          |  4 ++
 .../src/routes/ProcessModelEditDiagram.tsx    | 48 ++++++++++++++-----
 2 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/spiffworkflow-frontend/src/index.css b/spiffworkflow-frontend/src/index.css
index 5b79d9fa1..a8ac90cd7 100644
--- a/spiffworkflow-frontend/src/index.css
+++ b/spiffworkflow-frontend/src/index.css
@@ -173,6 +173,10 @@ h1.with-icons {
   margin-top: 1.3em;
 }
 
+.with-top-margin-for-label-next-to-text-input {
+  margin-top: 2.3em;
+}
+
 .with-tiny-top-margin {
   margin-top: 4px;
 }
diff --git a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
index af38d8bc4..dfe3a3a54 100644
--- a/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
+++ b/spiffworkflow-frontend/src/routes/ProcessModelEditDiagram.tsx
@@ -14,6 +14,9 @@ import {
   Tab,
   TabPanels,
   TabPanel,
+  TextInput,
+  Grid,
+  Column,
   // @ts-ignore
 } from '@carbon/react';
 import Row from 'react-bootstrap/Row';
@@ -60,6 +63,8 @@ export default function ProcessModelEditDiagram() {
   const [processes, setProcesses] = useState<ProcessReference[]>([]);
   const [displaySaveFileMessage, setDisplaySaveFileMessage] =
     useState<boolean>(false);
+  const [processModelFileInvalidText, setProcessModelFileInvalidText] =
+    useState<string>('');
 
   const handleShowMarkdownEditor = () => setShowMarkdownEditor(true);
 
@@ -160,6 +165,7 @@ export default function ProcessModelEditDiagram() {
   const handleFileNameCancel = () => {
     setShowFileNameEditor(false);
     setNewFileName('');
+    setProcessModelFileInvalidText('');
   };
 
   const navigateToProcessModelFile = (_result: any) => {
@@ -251,6 +257,11 @@ export default function ProcessModelEditDiagram() {
 
   const handleFileNameSave = (event: any) => {
     event.preventDefault();
+    if (!newFileName) {
+      setProcessModelFileInvalidText('Process Model file name is required.');
+      return;
+    }
+    setProcessModelFileInvalidText('');
     setShowFileNameEditor(false);
     saveDiagram(bpmnXmlForDiagramRendering);
   };
@@ -267,17 +278,32 @@ export default function ProcessModelEditDiagram() {
         onRequestSubmit={handleFileNameSave}
         onRequestClose={handleFileNameCancel}
       >
-        <label>File Name:</label>
-        <span>
-          <input
-            name="file_name"
-            type="text"
-            value={newFileName}
-            onChange={(e) => setNewFileName(e.target.value)}
-            autoFocus
-          />
-          {fileExtension}
-        </span>
+        <Grid
+          condensed
+          fullWidth
+          className="megacondensed process-model-files-section"
+        >
+          <Column md={4} lg={8} sm={4}>
+            <TextInput
+              id="process_model_file_name"
+              labelText="File Name:"
+              value={newFileName}
+              onChange={(e: any) => setNewFileName(e.target.value)}
+              invalidText={processModelFileInvalidText}
+              invalid={!!processModelFileInvalidText}
+              size="sm"
+              autoFocus
+            />
+          </Column>
+          <Column
+            md={4}
+            lg={8}
+            sm={4}
+            className="with-top-margin-for-label-next-to-text-input"
+          >
+            {fileExtension}
+          </Column>
+        </Grid>
       </Modal>
     );
   };