fix: refactor file naming error handling

Author: MohamedAli00949

rtl-spec/components/sidebar-file-tree.spec.tsx

@@ -96,10 +96,10 @@ describe('SidebarFileTree component', () => {
     ) as HTMLInputElement;
     await user.type(input, 'tester.js{Enter}');
 
-    expect(editorMosaic.files.get('tester.js')).toBe(EditorPresence.Pending);
+    expect(editorMosaic.files.get('tester.js')).toBe(EditorPresence.Hidden);
   });
 
-  it('fails to create new editors (file name inside subdir)', async () => {
+  it('fails to create new editors (file name with path separator)', async () => {
     const user = userEvent.setup();
     const { container } = render(<SidebarFileTree appState={store} />);
     const EDITOR_NEW_NAME = 'subdir/tester.js';
@@ -122,7 +122,7 @@ describe('SidebarFileTree component', () => {
     await waitFor(() => {
       console.log('store.showErrorDialog: ', store.showErrorDialog);
       expect(store.showErrorDialog).toHaveBeenCalledWith(
-        `Invalid filename "${EDITOR_NEW_NAME}": inside subdir not supported yet`,
+        `Invalid filename "${EDITOR_NEW_NAME}": filenames cannot include path separators`,
       );
     });
   });
@@ -265,7 +265,7 @@ describe('SidebarFileTree component', () => {
     expect(editorMosaic.files.get(EDITOR_NAME)).toBe(EditorPresence.Pending);
   });
 
-  it('fails if trying to rename an editor to an unsupported name (file inside subdir)', async () => {
+  it('fails if trying to rename an editor to an unsupported name (file name with path separator)', async () => {
     const user = userEvent.setup();
     const EDITOR_NAME = 'index.html';
     const EDITOR_NEW_NAME = 'msg/data.json';
@@ -288,7 +288,7 @@ describe('SidebarFileTree component', () => {
     // Wait for error dialog to be called
     await waitFor(() => {
       expect(store.showErrorDialog).toHaveBeenCalledWith(
-        `Invalid filename "${EDITOR_NEW_NAME}": inside subdir not supported yet`,
+        `Invalid filename "${EDITOR_NEW_NAME}": filenames cannot include path separators`,
       );
     });
 

src/renderer/components/sidebar-file-tree.tsx

@@ -14,10 +14,10 @@ import { ContextMenu2, Tooltip2 } from '@blueprintjs/popover2';
 import classNames from 'classnames';
 import { observer } from 'mobx-react';
 
-import { EditorId, PACKAGE_NAME } from '../../interfaces';
+import { EditorId } from '../../interfaces';
 import { EditorPresence } from '../editor-mosaic';
 import { AppState } from '../state';
-import { isMainEntryPoint, isSupportedFile } from '../utils/editor-utils';
+import { isMainEntryPoint } from '../utils/editor-utils';
 
 interface FileTreeProps {
   appState: AppState;
@@ -41,7 +41,7 @@ export const SidebarFileTree = observer(
     }
 
     public render() {
-      const { editorMosaic, showErrorDialog } = this.props.appState;
+      const { editorMosaic } = this.props.appState;
       const { files, focusedFile } = editorMosaic;
 
       const fileList: TreeNodeInfo[] = Array.from(files)
@@ -112,19 +112,6 @@ export const SidebarFileTree = observer(
                 if (e.key === 'Escape') {
                   e.currentTarget.blur();
                 } else if (e.key === 'Enter') {
-                  const filename = e.currentTarget.value.trim();
-                  if (filename.includes('/') || filename.includes('\\')) {
-                    await showErrorDialog(
-                      `Invalid filename "${filename}": inside subdir not supported yet`,
-                    );
-                    return;
-                  }
-                  if (!isSupportedFile(filename)) {
-                    await showErrorDialog(
-                      `Invalid filename "${filename}": Must be a file ending in .cjs, .js, .mjs, .html, .css, or .json`,
-                    );
-                    return;
-                  }
                   this.createEditor(e.currentTarget.value as EditorId);
                   e.currentTarget.blur();
                 }
@@ -202,30 +189,6 @@ export const SidebarFileTree = observer(
 
       if (!id) return;
 
-      if (id.includes('/') || id.includes('\\')) {
-        await appState.showErrorDialog(
-          `Invalid filename "${id}": inside subdir not supported yet`,
-        );
-        return;
-      }
-
-      if (
-        id.endsWith('.json') &&
-        [PACKAGE_NAME, 'package-lock.json'].includes(id)
-      ) {
-        await appState.showErrorDialog(
-          `Cannot add ${PACKAGE_NAME} or package-lock.json as custom files`,
-        );
-        return;
-      }
-
-      if (!isSupportedFile(id)) {
-        await appState.showErrorDialog(
-          `Invalid filename "${id}": Must be a file ending in .cjs, .js, .mjs, .html, .css, or .json`,
-        );
-        return;
-      }
-
       try {
         await appState.editorMosaic.renameFile(editorId, id);
 
@@ -240,13 +203,13 @@ export const SidebarFileTree = observer(
       editorMosaic.remove(editorId);
     };
 
-    public createEditor = (editorId: EditorId) => {
+    public createEditor = async (editorId: EditorId) => {
       const { appState } = this.props;
       try {
-        appState.editorMosaic.addNewFile(editorId);
-        appState.editorMosaic.show(editorId);
+        await appState.editorMosaic.addNewFile(editorId);
+        await appState.editorMosaic.show(editorId);
       } catch (err: any) {
-        appState.showErrorDialog(err.message);
+        await appState.showErrorDialog(err.message);
       }
     };
 

src/renderer/editor-mosaic.ts

@@ -287,6 +287,18 @@ export class EditorMosaic {
       throw new Error(`Cannot add file "${id}": File already exists`);
     }
 
+    if (id.includes('/') || id.includes('\\')) {
+      throw new Error(
+        `Invalid filename "${id}": filenames cannot include path separators`,
+      );
+    }
+
+    if (!isSupportedFile(id)) {
+      throw new Error(
+        `Invalid filename "${id}": Must be a file ending in .cjs, .js, .mjs, .html, .css, or .json`,
+      );
+    }
+
     const entryPoint = this.mainEntryPointFile();
 
     if (isMainEntryPoint(id) && entryPoint) {
@@ -308,6 +320,27 @@ export class EditorMosaic {
       throw new Error(`Cannot rename file to "${newId}": File already exists`);
     }
 
+    if (newId.includes('/') || newId.includes('\\')) {
+      throw new Error(
+        `Invalid filename "${newId}": filenames cannot include path separators`,
+      );
+    }
+
+    if (
+      newId.endsWith('.json') &&
+      [PACKAGE_NAME, 'package-lock.json'].includes(newId)
+    ) {
+      throw new Error(
+        `Cannot add ${PACKAGE_NAME} or package-lock.json as custom files`,
+      );
+    }
+
+    if (!isSupportedFile(newId)) {
+      throw new Error(
+        `Invalid filename "${newId}": Must be a file ending in .cjs, .js, .mjs, .html, .css, or .json`,
+      );
+    }
+
     const entryPoint = this.mainEntryPointFile();
 
     if (isMainEntryPoint(newId) && entryPoint !== oldId) {