fix: Prevent overwriting files and folders with existing content

https://harperdb.atlassian.net/browse/STUDIO-545

Author: dawsontoth

src/features/instance/applications/components/NewApplication/index.tsx

@@ -50,8 +50,14 @@ export function NewApplication() {
 				path: [`applicationName`],
 				message: 'Please name your application!',
 			});
+		} else if (rootEntries.find(rootEntry => rootEntry.name === data.applicationName)) {
+			ctx.addIssue({
+				code: 'custom',
+				path: [`applicationName`],
+				message: 'That application name is already in use!',
+			});
 		}
-	}, [defaultApplicationName]);
+	}, [defaultApplicationName, rootEntries]);
 
 	const methods = useForm({
 		resolver: zodResolver(NewApplicationSchema.superRefine(refineZod)),

src/features/instance/applications/context/EditorViewContext.tsx

@@ -8,6 +8,7 @@ import { FileEntry } from './fileEntry';
 export type EditorViewContextValue = {
 	rootEntries: Array<DirectoryEntry | FileEntry>;
 	reloadRootEntries: () => Promise<APIDirectoryEntry>;
+	entryExists: (path: string) => boolean;
 
 	openedEntry: DirectoryEntry | FileEntry | undefined;
 	setOpenedEntry: (entry: DirectoryEntry | FileEntry | undefined) => void;

src/features/instance/applications/context/EditorViewProvider.tsx

@@ -38,28 +38,25 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 	const queryClient = useQueryClient();
 	const { open }: { open?: string } = useSearch({ strict: false });
 
-	const reloadRootEntries = useCallback(async () =>
-		queryClient.fetchQuery<APIDirectoryEntry>({
-			queryKey: [instanceParams.entityId, 'get_components'],
-			networkMode: 'online',
-		}), [queryClient, instanceParams]);
-
 	/*
 	 Create our structured view from the relational API data.
 	 */
 	const { data: apiComponents } = useSuspenseQuery(getComponentsQueryOptions(instanceParams));
-	const rootEntries: Array<DirectoryEntry | FileEntry> = useMemo(() => {
-		if (!apiComponents) {
-			return [];
-		}
-		return transformNodes(
-			apiComponents.entries,
+	const mappedData: {
+		rootEntries: Array<DirectoryEntry | FileEntry>,
+		pathsRegistry: Set<string>,
+	} = useMemo(() => {
+		const pathsRegistry = new Set<string>();
+		const rootEntries = transformNodes(
+			apiComponents.entries || [],
 			'entries',
 			(node: APIFileEntry | APIDirectoryEntry, parents: APIDirectoryEntry[]) => {
 				const readMeAPIFile = isDirectory(node) && node.entries.find(e => e.name.toLowerCase() === 'readme.md');
+				const path = [...parents.map(p => p.name), node.name].join('/');
+				pathsRegistry.add(path);
 				return {
 					name: node.name,
-					path: [...parents.map(p => p.name), node.name].join('/'),
+					path,
 					project: (parents[0] || node)?.name,
 					package: (parents[0] || node)?.package,
 					overviewEntry: readMeAPIFile && !isDirectory(readMeAPIFile) && {
@@ -71,9 +68,23 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 				} satisfies DirectoryEntry | FileEntry;
 			},
 		);
+		return {
+			rootEntries,
+			pathsRegistry,
+		};
 	}, [apiComponents]);
 
-	const defaultFolderExpansions = rootEntries.filter(rootEntry => !rootEntry.package && rootEntry.path !== newApplication).map<TreeItemIndex>(rootEntry => rootEntry.name);
+	const reloadRootEntries = useCallback(async () =>
+		queryClient.fetchQuery<APIDirectoryEntry>({
+			queryKey: [instanceParams.entityId, 'get_components'],
+			networkMode: 'online',
+		}), [queryClient, instanceParams]);
+
+	const entryExists = useCallback((path: string) => {
+		return mappedData.pathsRegistry.has(path);
+	}, [mappedData.pathsRegistry]);
+
+	const defaultFolderExpansions = mappedData.rootEntries.filter(rootEntry => !rootEntry.package && rootEntry.path !== newApplication).map<TreeItemIndex>(rootEntry => rootEntry.name);
 	let defaultFocusedItem = defaultFolderExpansions[0];
 	let defaultSelectedItem = defaultFolderExpansions.slice(0, 1);
 	if (!defaultFocusedItem) {
@@ -181,8 +192,9 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 	const value = useMemo<EditorViewContextValue>(() => {
 		return {
 
-			rootEntries,
+			rootEntries: mappedData.rootEntries,
 			reloadRootEntries,
+			entryExists,
 
 			focusedItem,
 			setFocusedItem,
@@ -203,8 +215,9 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 
 		};
 	}, [
-		rootEntries,
+		mappedData.rootEntries,
 		reloadRootEntries,
+		entryExists,
 
 		focusedItem,
 		setFocusedItem,

src/features/instance/applications/modals/AddDirectoryOrFileModal.tsx

@@ -21,10 +21,12 @@ import { useSetComponentFile } from '@/integrations/api/instance/applications/se
 import { excludeFalsy } from '@/lib/arrays/excludeFalsy';
 import { attemptToRestoreFocus } from '@/lib/attemptToRestoreFocus';
 import { setWatchedValue, useWatchedValue } from '@/lib/events/watcher';
+import { capitalizeWords } from '@/lib/string/capitalizeWords';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Plus } from 'lucide-react';
 import { useCallback } from 'react';
 import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
 import z from 'zod';
 
 export function AddDirectoryOrFileModal() {
@@ -35,7 +37,14 @@ export function AddDirectoryOrFileModal() {
 		attemptToRestoreFocus(trigger);
 	}, [trigger]);
 
-	const { openedEntry, reloadRootEntries, setFocusedItem, setSelectedItems, setExpandedItems } = useEditorView();
+	const {
+		openedEntry,
+		entryExists,
+		reloadRootEntries,
+		setFocusedItem,
+		setSelectedItems,
+		setExpandedItems,
+	} = useEditorView();
 	const instanceParams = useInstanceClientIdParams();
 	const { mutate: addFolderFile, isPending } = useSetComponentFile();
 	const NewFileFolderSchema = z.object({
@@ -57,7 +66,7 @@ export function AddDirectoryOrFileModal() {
 	});
 
 	const submitForm = useCallback((data: z.infer<typeof NewFileFolderSchema>) => {
-		if (!openedEntry) {
+		if (!openedEntry || !type) {
 			return;
 		}
 		const splitPath = openedEntry.path.split('/');
@@ -66,9 +75,16 @@ export function AddDirectoryOrFileModal() {
 				? splitPath.slice(1)
 				: splitPath.slice(1, -1)
 		).join('/');
+		const file = filePath ? `${filePath}/${data.name}` : data.name;
+		if (entryExists(openedEntry.project + '/' + file)) {
+			toast.error(`${capitalizeWords(type)} already exists!`, {
+				description: file,
+			});
+			return;
+		}
 		addFolderFile(
 			{
-				file: `${filePath}/${data.name}`,
+				file,
 				project: openedEntry.project,
 				payload: type === 'directory' ? undefined : '',
 				...instanceParams,
@@ -87,7 +103,7 @@ export function AddDirectoryOrFileModal() {
 				},
 			},
 		);
-	}, [addFolderFile, form, closeModal, instanceParams, openedEntry, reloadRootEntries, setExpandedItems, setFocusedItem, setSelectedItems, type]);
+	}, [addFolderFile, form, closeModal, instanceParams, openedEntry, entryExists, reloadRootEntries, setExpandedItems, setFocusedItem, setSelectedItems, type]);
 
 	const onCancelClick = useCallback(() => {
 		closeModal();

src/features/instance/applications/modals/RenameFileModal.tsx

@@ -14,6 +14,7 @@ import { FormItem } from '@/components/ui/form/FormItem';
 import { FormLabel } from '@/components/ui/form/FormLabel';
 import { FormMessage } from '@/components/ui/form/FormMessage';
 import { Input } from '@/components/ui/input';
+import { isDirectory } from '@/features/instance/applications/context/isDirectory';
 import { useEditorView } from '@/features/instance/applications/hooks/useEditorView';
 import { useRenameFiles } from '@/features/instance/applications/hooks/useRenameFiles';
 import { attemptToRestoreFocus } from '@/lib/attemptToRestoreFocus';
@@ -23,6 +24,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import { PencilIcon } from 'lucide-react';
 import { useCallback, useEffect, useState } from 'react';
 import { useForm } from 'react-hook-form';
+import { toast } from 'sonner';
 import z from 'zod';
 
 export function RenameFileModal() {
@@ -33,7 +35,7 @@ export function RenameFileModal() {
 		attemptToRestoreFocus(trigger);
 	}, [trigger]);
 
-	const { openedEntry } = useEditorView();
+	const { openedEntry, entryExists } = useEditorView();
 	const RenameFileSchema = z.object({
 		name: z
 			.string()
@@ -45,7 +47,6 @@ export function RenameFileModal() {
 			.trim()
 			.refine((name) => name !== openedEntry?.name, {
 				error: 'Please enter a new name.',
-				path: ['name'],
 			}),
 	});
 	const [isPending, setIsPending] = useState(false);
@@ -65,18 +66,20 @@ export function RenameFileModal() {
 		if (!openedEntry) {
 			return;
 		}
+		const to = renameFileInPath(openedEntry.path, data.name);
+		if (entryExists(to)) {
+			toast.error(`${isDirectory(openedEntry) ? 'Directory' : 'File'} already exists!`, {
+				description: to,
+			});
+			return;
+		}
 
 		setIsPending(true);
-		await renameFiles([
-			{
-				from: openedEntry.path,
-				to: renameFileInPath(openedEntry.path, data.name),
-			},
-		]);
+		await renameFiles([{ from: openedEntry.path, to }]);
 		closeModal();
 		form.reset();
 		setIsPending(false);
-	}, [form, closeModal, openedEntry, renameFiles, setIsPending]);
+	}, [closeModal, entryExists, form, openedEntry, renameFiles, setIsPending]);
 
 	const onCancelClick = useCallback(() => {
 		closeModal();

src/features/instance/applications/shortcuts/deleteShortcut.ts

@@ -2,8 +2,8 @@ import { currySetWatchedValue, setWatchedValue } from '@/lib/events/watcher';
 import { Contract } from './contract';
 
 export const deleteShortcut = {
-	handleGlobal(key) {
-		if (key === 'Backspace') {
+	handleGlobal(key, modifiers) {
+		if ((modifiers.cmd || modifiers.ctrl) && key === 'Delete') {
 			setWatchedValue('ShowDeleteDirectoryOrFileModal', true);
 			return true;
 		}

src/features/instance/applications/shortcuts/index.ts

@@ -55,5 +55,5 @@ function keyDownHandler(e: KeyboardEvent) {
 			return;
 		}
 	}
-	console.log('unhandled key press', e.key, modifiers);
+	// console.log('unhandled key press', e.key, modifiers);
 }