feat: Rename file from editor too

Author: dawsontoth

src/components/RestartButton.tsx

@@ -11,6 +11,7 @@ interface RestartButtonParams extends InstanceClientConfig, VariantProps<typeof
 	targetNoun: 'Instance' | 'Cluster';
 	operation: 'restart_service' | 'restart';
 	className?: string;
+	disabled?: boolean;
 }
 
 export function RestartButton({
@@ -19,6 +20,7 @@ export function RestartButton({
 	operation,
 	variant,
 	className,
+	disabled,
 }: RestartButtonParams) {
 	const {
 		onRestartClick: onRestartClusterClick,
@@ -31,7 +33,7 @@ export function RestartButton({
 				variant={variant || 'positiveOutline'}
 				className={cx('mx-0 md:mx-4 rounded-full', className)}
 				onClick={targetNoun === 'Cluster' && operation === 'restart' ? onRestartClusterClick : onRestartClick}
-				disabled={isRestartPending || isRestartClusterPending}
+				disabled={disabled || isRestartPending || isRestartClusterPending}
 			>
 				<RotateCcwIcon /> Restart {targetNoun}
 			</Button>

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

@@ -38,7 +38,6 @@ export function ApplicationsSidebar() {
 		}
 	}, [openedEntry, focusedItem, items]);
 
-	// TODO: rename from editor handling
 	// TODO: Split all this logic up into smaller files, right?
 
 	// TODO: keyboard shortcuts when the editor isn't focused (creating files and folders, deleting, can we

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

@@ -7,6 +7,7 @@ import { useEditorView } from '@/features/instance/applications/hooks/useEditorV
 import { AddDirectoryOrFileModal } from '@/features/instance/applications/modals/AddDirectoryOrFileModal';
 import { DeleteDirectoryOrFileModal } from '@/features/instance/applications/modals/DeleteDirectoryOrFileModal';
 import { RedeployApplicationModal } from '@/features/instance/applications/modals/RedeployApplicationModal';
+import { RenameFileModal } from '@/features/instance/applications/modals/RenameFileModal';
 import { useDeployComponentMutation } from '@/features/instance/operations/mutations/deployComponent';
 import { useEffectedState } from '@/hooks/useEffectedState';
 import { useInstanceBrowseManagePermission } from '@/hooks/usePermissions';
@@ -91,6 +92,7 @@ export function TextEditorView() {
 		toggleOff: hideAddingDirectory,
 	} = useToggler(false);
 	const { toggled: isAddingFile, toggleOn: onAddFileClicked, toggleOff: hideAddingFile } = useToggler(false);
+	const { toggled: isRenamingFile, toggleOn: onRenameClick, toggleOff: onHideRenamingFileModal } = useToggler(false);
 	const {
 		toggled: isDeleteDirectoryOrFileClicked,
 		toggleOn: onDeleteClick,
@@ -161,6 +163,12 @@ export function TextEditorView() {
 				keybindings: [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KeyN],
 				run: onAddFileClicked,
 			}),
+			editor.addAction({
+				id: 'rename-file',
+				label: 'Rename File',
+				keybindings: [monaco.KeyMod.WinCtrl | monaco.KeyMod.Alt | monaco.KeyCode.KeyR],
+				run: onRenameClick,
+			}),
 			editor.addAction({
 				id: 'new-directory',
 				label: 'New Directory',
@@ -189,12 +197,14 @@ export function TextEditorView() {
 				disposable?.dispose();
 			}
 		};
-	}, [mountedRef, canManageBrowseInstance, onAddFileClicked, onAddDirectoryClicked, onSaveClick, onRevertChangesClicked, onDeleteClick]);
+	}, [mountedRef, canManageBrowseInstance, onAddFileClicked, onRenameClick, onAddDirectoryClicked, onSaveClick, onRevertChangesClicked, onDeleteClick]);
 
 	if (!openedEntry) {
 		return null;
 	}
 
+	const fileIsClean = updateFileContent === undefined || updateFileContent === openedEntryContents;
+
 	return (
 		<>
 			{openedEntryContents !== undefined && <>
@@ -227,11 +237,7 @@ export function TextEditorView() {
 					variant="default"
 					className="rounded-none"
 					onClick={onSaveClick}
-					disabled={
-						updateFileContent === undefined ||
-						updateFileContent === openedEntryContents ||
-						isSavingFile
-					}
+					disabled={fileIsClean || isSavingFile}
 				>
 					<SaveIcon />
 					<span className="hidden lg:inline-block"><u>S</u>ave</span>
@@ -240,12 +246,8 @@ export function TextEditorView() {
 				{!openedEntry.package && canManageBrowseInstance && <Button
 					variant="ghost"
 					className="rounded-none"
-					// onClick={onRenameClick}
-					disabled={
-						updateFileContent === undefined ||
-						updateFileContent === openedEntryContents ||
-						isSavingFile
-					}
+					onClick={onRenameClick}
+					disabled={!fileIsClean || isSavingFile}
 				>
 					<PencilIcon />
 					<span className="hidden lg:inline-block"><u>R</u>ename</span>
@@ -284,6 +286,7 @@ export function TextEditorView() {
 					operation="restart_service"
 					variant="ghost"
 					className="rounded-none"
+					disabled={!fileIsClean || isSavingFile}
 				/>}
 
 				<div className="grow"></div>
@@ -293,11 +296,7 @@ export function TextEditorView() {
 					variant="ghost"
 					className="rounded-none"
 					onClick={onRevertChangesClicked}
-					disabled={
-						updateFileContent === undefined ||
-						updateFileContent === openedEntryContents ||
-						isSavingFile
-					}
+					disabled={fileIsClean || isSavingFile}
 				>
 					<Undo2Icon />
 					<span className="hidden xl:inline-block">Revert Changes</span>
@@ -318,6 +317,10 @@ export function TextEditorView() {
 				hideModal={onHideAddDirectoryModal}
 				type={isAddingDirectory ? 'directory' : 'file'}
 			/>
+			<RenameFileModal
+				isModalOpen={isRenamingFile}
+				hideModal={onHideRenamingFileModal}
+			/>
 			<DeleteDirectoryOrFileModal
 				isModalOpen={isDeleteDirectoryOrFileClicked}
 				setIsModalOpen={setIsDeleteDirectoryOrFileClicked}

src/features/instance/applications/hooks/useRenameFile.ts

@@ -62,7 +62,7 @@ export function useRenameFile() {
 
 			reloadRootEntries();
 
-			const existingIndex = `${data.project}/${data.path}`;
+			const existingIndex = data.path;
 			const newIndex = `${existingIndex.split('/').slice(0, -1).join('/')}/${name}`;
 
 			setSelectedItems(selectedItems => {

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

@@ -0,0 +1,129 @@
+import { Button } from '@/components/ui/button';
+import {
+	Dialog,
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from '@/components/ui/dialog';
+import { Form } from '@/components/ui/form/Form';
+import { FormControl } from '@/components/ui/form/FormControl';
+import { FormField } from '@/components/ui/form/FormField';
+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 { useEditorView } from '@/features/instance/applications/hooks/useEditorView';
+import { useRenameFile } from '@/features/instance/applications/hooks/useRenameFile';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Ban, PencilIcon } from 'lucide-react';
+import { useCallback, useEffect, useState } from 'react';
+import { useForm } from 'react-hook-form';
+import z from 'zod';
+
+export function RenameFileModal({
+	isModalOpen = false,
+	hideModal,
+}: {
+	readonly isModalOpen?: boolean;
+	readonly hideModal: () => void;
+}) {
+	const { openedEntry } = useEditorView();
+	const RenameFileSchema = z.object({
+		name: z
+			.string()
+			.nonempty({ error: 'Please enter a valid name.' })
+			.regex(/^[a-zA-Z0-9_\- .]*$/, {
+				error: 'Names can only contain letters, numbers, underscores, hyphens, periods, and spaces.',
+			})
+			.max(50, { error: 'Names cannot be longer than 50 characters.' })
+			.trim()
+			.refine((name) => name !== openedEntry?.name, {
+				error: 'Please enter a new name.',
+				path: ['name'],
+			}),
+	});
+	const [isPending, setIsPending] = useState(false);
+	const renameFile = useRenameFile();
+
+	const form = useForm({
+		resolver: zodResolver(RenameFileSchema),
+	});
+
+	useEffect(() => {
+		if (openedEntry?.name) {
+			form.reset({ name: openedEntry?.name });
+		}
+	}, [openedEntry?.name]);
+
+	const submitForm = useCallback(async (data: z.infer<typeof RenameFileSchema>) => {
+		if (!openedEntry) {
+			return;
+		}
+
+		setIsPending(true);
+		await renameFile(openedEntry, data.name);
+		hideModal();
+		form.reset();
+		setIsPending(false);
+	}, [setIsPending, openedEntry]);
+
+	const onCancelClick = useCallback(() => {
+		hideModal();
+		form.reset();
+	}, [hideModal, form]);
+
+	return (
+		<Dialog onOpenChange={hideModal} open={isModalOpen}>
+			<DialogContent aria-describedby={undefined} className="text-white">
+				<Form {...form}>
+					<form onSubmit={form.handleSubmit(submitForm)}>
+						<DialogHeader>
+							<DialogTitle>Rename File</DialogTitle>
+							<DialogDescription>
+								{openedEntry?.path}
+							</DialogDescription>
+						</DialogHeader>
+
+						<FormField
+							control={form.control}
+							name="name"
+							render={({ field }) => (
+								<FormItem className="my-2">
+									<FormLabel>Name</FormLabel>
+									<FormControl>
+										<Input
+											disabled={isPending}
+											type="text"
+											autoComplete="off"
+											autoCapitalize="off"
+											{...field}
+										/>
+									</FormControl>
+									<FormMessage />
+								</FormItem>
+							)}
+						/>
+
+						<DialogFooter>
+							<div className="flex justify-between w-full">
+								<Button type="button" variant="destructiveOutline" className="rounded-full" onClick={onCancelClick}>
+									<Ban /> Cancel
+								</Button>
+								<Button
+									variant="positiveOutline"
+									type="submit"
+									className="rounded-full"
+									disabled={isPending || !form.formState.isDirty || !form.formState.isValid}
+								>
+									<PencilIcon /> Rename
+								</Button>
+							</div>
+						</DialogFooter>
+					</form>
+				</Form>
+			</DialogContent>
+		</Dialog>
+	);
+}