From f462457f92dce4ffa5e10fcd802c0d6e63fc01a2 Mon Sep 17 00:00:00 2001
From: Kevin Burnett <18027+burnettk@users.noreply.github.com>
Date: Tue, 23 Jan 2024 14:08:44 -0800
Subject: [PATCH] validate prefix and make saveFile async (#915)

Co-authored-by: burnettk <burnettk@users.noreply.github.com>
---
 .../ReactFormBuilder/ReactFormBuilder.tsx     | 39 +++++++++++++++----
 1 file changed, 32 insertions(+), 7 deletions(-)

diff --git a/spiffworkflow-frontend/src/components/ReactFormBuilder/ReactFormBuilder.tsx b/spiffworkflow-frontend/src/components/ReactFormBuilder/ReactFormBuilder.tsx
index 76891a2f..81a0654d 100644
--- a/spiffworkflow-frontend/src/components/ReactFormBuilder/ReactFormBuilder.tsx
+++ b/spiffworkflow-frontend/src/components/ReactFormBuilder/ReactFormBuilder.tsx
@@ -64,6 +64,9 @@ export default function ReactFormBuilder({
   const [fetchFailed, setFetchFailed] = useState<boolean>(false);
   const [ready, setReady] = useState<boolean>(false);
 
+  const [filenameBaseInvalid, setFilenameBaseInvalid] =
+    useState<boolean>(false);
+
   const [strSchema, setStrSchema] = useState<string>('');
   const [debouncedStrSchema] = useDebounce(strSchema, 500);
   const [strUI, setStrUI] = useState<string>('');
@@ -100,7 +103,7 @@ export default function ReactFormBuilder({
   }
 
   const saveFile = useCallback(
-    (file: File, create: boolean = false) => {
+    (file: File, create: boolean = false, callback: Function | null = null) => {
       let httpMethod = 'PUT';
       let url = `/process-models/${processModelId}/files`;
       if (create) {
@@ -114,7 +117,11 @@ export default function ReactFormBuilder({
 
       HttpService.makeCallToBackend({
         path: url,
-        successCallback: () => {},
+        successCallback: () => {
+          if (callback) {
+            callback();
+          }
+        },
         failureCallback: (e: any) => {
           setErrorMessage(`Failed to save file: '${fileName}'. ${e.message}`);
         },
@@ -125,12 +132,28 @@ export default function ReactFormBuilder({
     [processModelId, fileName]
   );
 
+  const hasValidName = (identifierToCheck: string) => {
+    return identifierToCheck.match(/^[a-z0-9][0-9a-z-]+[a-z0-9]$/);
+  };
+
   const createFiles = (base: string) => {
-    saveFile(new File(['{}'], base + SCHEMA_EXTENSION), true);
-    saveFile(new File(['{}'], base + UI_EXTENSION), true);
-    saveFile(new File(['{}'], base + DATA_EXTENSION), true);
-    setBaseFileName(base);
-    onFileNameSet(base + SCHEMA_EXTENSION);
+    if (hasValidName(base)) {
+      // meaning it switched from invalid to valid
+      if (filenameBaseInvalid) {
+        setFilenameBaseInvalid(false);
+      }
+    } else {
+      setFilenameBaseInvalid(true);
+      return;
+    }
+    saveFile(new File(['{}'], base + SCHEMA_EXTENSION), true, () => {
+      saveFile(new File(['{}'], base + UI_EXTENSION), true, () => {
+        saveFile(new File(['{}'], base + DATA_EXTENSION), true, () => {
+          setBaseFileName(base);
+          onFileNameSet(base + SCHEMA_EXTENSION);
+        });
+      });
+    });
   };
 
   const isReady = () => {
@@ -373,6 +396,8 @@ export default function ReactFormBuilder({
           <TextInput
             id="file_name"
             labelText="Name:"
+            invalidText="Name is required, must be at least three characters, and must be all lowercase characters and hyphens."
+            invalid={filenameBaseInvalid}
             value={newFileName}
             onChange={(event: any) => {
               setNewFileName(event.srcElement.value);