Add empty name validation to files

public/translations/en.json

@@ -24,7 +24,8 @@
       "generalError": "Error",
       "notUnique": "File names must be unique.",
       "or": "or",
-      "unsupportedExtension": "File names must end in {{allowedExtensions}}."
+      "unsupportedExtension": "File names must end in {{allowedExtensions}}.",
+      "emptyFileName": "File name cannot be empty."
     },
     "files": "Project files",
     "images": "Image gallery",

src/components/Modals/NewFileModal.test.js

@@ -100,4 +100,11 @@ describe("Testing the new file modal", () => {
     ];
     expect(store.getActions()).toEqual(expectedActions);
   });
+
+  test("Empty file name throws error", () => {
+    fireEvent.change(inputBox, { target: { value: ".py" } });
+    fireEvent.click(saveButton);
+    const expectedActions = [setNameError("filePanel.errors.emptyFileName")];
+    expect(store.getActions()).toEqual(expectedActions);
+  });
 });

src/components/Modals/RenameFileModal.test.js

@@ -119,4 +119,11 @@ describe("Testing the rename file modal", () => {
     ];
     expect(store.getActions()).toEqual(expectedActions);
   });
+
+  test("Empty file name throws error", () => {
+    fireEvent.change(inputBox, { target: { value: ".py" } });
+    fireEvent.click(saveButton);
+    const expectedActions = [setNameError("filePanel.errors.emptyFileName")];
+    expect(store.getActions()).toEqual(expectedActions);
+  });
 });

src/utils/componentNameValidation.js

@@ -9,8 +9,12 @@ const allowedExtensions = {
 const reservedFileNames = ["INSTRUCTIONS.md"];
 
 const isValidFileName = (fileName, projectType, componentNames) => {
-  const extension = fileName.split(".").slice(1).join(".");
+  const parts = fileName.split(".");
+  const extension = parts.slice(1).join(".");
+  const baseName = parts[0];
+
   if (
+    baseName.length > 0 &&
     !reservedFileNames.includes(fileName) &&
     allowedExtensions[projectType].includes(extension) &&
     !componentNames.includes(fileName) &&
@@ -31,7 +35,10 @@ export const validateFileName = (
   callback,
   currentFileName = null,
 ) => {
-  const extension = fileName.split(".").slice(1).join(".");
+  const parts = fileName.split(".");
+  const extension = parts.slice(1).join(".");
+  const baseName = parts[0];
+
   if (
     isValidFileName(fileName, projectType, componentNames) ||
     (currentFileName && fileName === currentFileName)
@@ -57,6 +64,8 @@ export const validateFileName = (
         }),
       ),
     );
+  } else if (baseName.length === 0) {
+    dispatch(setNameError(t("filePanel.errors.emptyFileName")));
   } else {
     dispatch(setNameError(t("filePanel.errors.generalError")));
   }