feat: Update tree when adding and deleting stuff

Author: dawsontoth

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

@@ -7,28 +7,27 @@ import type { DirectoryEntry } from '@/features/instance/applications/context/di
 import type { FileEntry } from '@/features/instance/applications/context/fileEntry';
 import { isDirectory } from '@/features/instance/applications/context/isDirectory';
 import { useEditorView } from '@/features/instance/applications/hooks/useEditorView';
-import { useSessionStorage } from '@/hooks/useSessionStorage';
-import { useParams } from '@tanstack/react-router';
 import { useEffect, useMemo } from 'react';
 import { ControlledTreeEnvironment, Tree } from 'react-complex-tree';
 import './file-explorer-modern.css';
-import { TreeItemIndex } from 'react-complex-tree/src/types';
 import { FileTypeIcon } from './FileTreeExplorer/FileTypeIcon';
 
 export function ApplicationsSidebar() {
-	const { rootEntries, openedEntry, setOpenedEntry } = useEditorView();
-	const { clusterId, instanceId }: { clusterId?: string; instanceId?: string } = useParams({ strict: false });
-
-	const defaultFolderExpansions = rootEntries.filter(rootEntry => !rootEntry.package).map<TreeItemIndex>(rootEntry => rootEntry.name);
-	const defaultFocusedItem = defaultFolderExpansions[0];
-	const defaultSelectedItem = defaultFolderExpansions.slice(0, 1);
-	const [focusedItem, setFocusedItem] = useSessionStorage(`FileFocused/${instanceId || clusterId}` as 'FileFocused/{instanceId}', defaultFocusedItem);
-	const [expandedItems, setExpandedItems] = useSessionStorage(`FolderOpened/${instanceId || clusterId}` as 'FolderOpened/{instanceId}', defaultFolderExpansions);
-	const [selectedItems, setSelectedItems] = useSessionStorage(`FileSelected/${instanceId || clusterId}` as 'FileSelected/{instanceId}', defaultSelectedItem);
+	const {
+		rootEntries,
+		openedEntry,
+		setOpenedEntry,
+		focusedItem,
+		setFocusedItem,
+		expandedItems,
+		setExpandedItems,
+		selectedItems,
+		setSelectedItems,
+	} = useEditorView();
 
 	const { items, rootId } = useMemo(() => buildItems(rootEntries), [rootEntries]);
 
-	useEffect(() => {
+	useEffect(function setOpenedEntryFromFocusedItem() {
 		if (openedEntry?.path !== focusedItem && focusedItem) {
 			const item = items[focusedItem];
 			const entry = item?.data as DirectoryEntry | FileEntry | undefined;
@@ -38,7 +37,6 @@ export function ApplicationsSidebar() {
 		}
 	}, [openedEntry, focusedItem, items]);
 
-	// TODO: consistently drive file and folder selection through context (particularly during creation and deletion)
 	// TODO: onRenameItem f2 handling
 	// TODO: on drag item from one folder to another
 	// TODO: Split all this logic up into smaller files, right?

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

@@ -288,14 +288,6 @@ export function TextEditorView() {
 
 				<div className="grow"></div>
 
-				{!restrictPackageModification && canManageBrowseInstance && <Button
-					variant="destructiveGhost"
-					className="rounded-none"
-					onClick={onDeleteClick}
-				>
-					<TrashIcon />
-					<span className="hidden xl:inline-block"><u>D</u>elete</span>
-				</Button>}
 
 				{!isDirectory(openedEntry) && !openedEntry.package && canManageBrowseInstance && <Button
 					variant="ghost"
@@ -311,6 +303,14 @@ export function TextEditorView() {
 					<span className="hidden xl:inline-block">Revert Changes</span>
 				</Button>}
 
+				{!restrictPackageModification && canManageBrowseInstance && <Button
+					variant="destructiveGhost"
+					className="rounded-none"
+					onClick={onDeleteClick}
+				>
+					<TrashIcon />
+					<span className="hidden xl:inline-block"><u>D</u>elete</span>
+				</Button>}
 			</div>
 
 			<AddDirectoryOrFileModal

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

@@ -1,5 +1,6 @@
 import { SetComponentFileRequest } from '@/features/instance/operations/mutations/updateComponentFile';
 import { createContext } from 'react';
+import { TreeItemIndex } from 'react-complex-tree/src/types';
 import { DirectoryEntry } from './directoryEntry';
 import { FileEntry } from './fileEntry';
 
@@ -13,6 +14,13 @@ export type EditorViewContextValue = {
 	openedEntryContents: string | null;
 	setOpenedEntryContents: (contents: string | null) => void;
 
+	focusedItem: TreeItemIndex | undefined,
+	setFocusedItem: (entry: TreeItemIndex | undefined | ((prevState: TreeItemIndex | undefined) => TreeItemIndex | undefined)) => void,
+	expandedItems: TreeItemIndex[],
+	setExpandedItems: (entries: TreeItemIndex[] | ((prevState: TreeItemIndex[]) => TreeItemIndex[])) => void,
+	selectedItems: TreeItemIndex[],
+	setSelectedItems: (entries: TreeItemIndex[] | ((prevState: TreeItemIndex[]) => TreeItemIndex[])) => void,
+
 	saveFile: (data: SetComponentFileRequest, filePath: string) => void;
 	isSavingFile: boolean;
 };

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

@@ -9,9 +9,11 @@ import {
 	APIFileEntry,
 	getComponentsQueryOptions,
 } from '@/features/instance/operations/queries/getComponents';
+import { useSessionStorage } from '@/hooks/useSessionStorage';
 import { transformNodes } from '@/lib/arrays/transformNodes';
 import { useQuery, useQueryClient, useSuspenseQuery } from '@tanstack/react-query';
 import { PropsWithChildren, useCallback, useEffect, useMemo, useState } from 'react';
+import { TreeItemIndex } from 'react-complex-tree/src/types';
 import { DirectoryEntry } from './directoryEntry';
 import { EditorViewContext, EditorViewContextValue } from './EditorViewContext';
 import { FileEntry } from './fileEntry';
@@ -58,9 +60,15 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 				} satisfies DirectoryEntry | FileEntry;
 			},
 		);
-
 	}, [apiComponents]);
 
+	const defaultFolderExpansions = rootEntries.filter(rootEntry => !rootEntry.package).map<TreeItemIndex>(rootEntry => rootEntry.name);
+	const defaultFocusedItem = defaultFolderExpansions[0] as TreeItemIndex | undefined;
+	const defaultSelectedItem = defaultFolderExpansions.slice(0, 1);
+	const [focusedItem, setFocusedItem] = useSessionStorage(`FileFocused/${instanceParams.entityId}` as 'FileFocused/{entityId}', defaultFocusedItem);
+	const [expandedItems, setExpandedItems] = useSessionStorage(`FolderOpened/${instanceParams.entityId}` as 'FolderOpened/{entityId}', defaultFolderExpansions);
+	const [selectedItems, setSelectedItems] = useSessionStorage(`FileSelected/${instanceParams.entityId}` as 'FileSelected/{entityId}', defaultSelectedItem);
+
 	/*
 	 Load the selected file contents.
 	 */
@@ -95,7 +103,7 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 		(data: SetComponentFileRequest, filePath: string) => {
 			saveComponentFile(data, {
 				onSuccess: () => {
-					if (openedEntry?.path === filePath && data.payload) {
+					if (openedEntry?.path === filePath && data.payload !== undefined) {
 						setOpenedEntryContents(data.payload);
 					}
 				},
@@ -116,6 +124,13 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 			rootEntries,
 			reloadRootEntries,
 
+			focusedItem,
+			setFocusedItem,
+			expandedItems,
+			setExpandedItems,
+			selectedItems,
+			setSelectedItems,
+
 			openedEntry,
 			setOpenedEntry,
 
@@ -126,6 +141,25 @@ export function EditorViewProvider({ children }: PropsWithChildren) {
 			isSavingFile,
 
 		};
-	}, [rootEntries, openedEntry, openedEntryContents, isSavingFile]);
+	}, [
+		rootEntries,
+		reloadRootEntries,
+
+		focusedItem,
+		setFocusedItem,
+		expandedItems,
+		setExpandedItems,
+		selectedItems,
+		setSelectedItems,
+
+		openedEntry,
+		setOpenedEntry,
+
+		openedEntryContents,
+		setOpenedEntryContents,
+
+		saveFile,
+		isSavingFile,
+	]);
 	return <EditorViewContext.Provider value={value}>{children}</EditorViewContext.Provider>;
 }

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

@@ -18,6 +18,7 @@ import { useInstanceClientIdParams } from '@/config/useInstanceClient';
 import { isDirectory } from '@/features/instance/applications/context/isDirectory';
 import { useEditorView } from '@/features/instance/applications/hooks/useEditorView';
 import { useUpdateComponentFile } from '@/features/instance/operations/mutations/updateComponentFile';
+import { excludeFalsy } from '@/lib/arrays/excludeFalsy';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { Ban, Plus } from 'lucide-react';
 import { useCallback } from 'react';
@@ -33,7 +34,7 @@ export function AddDirectoryOrFileModal({
 	readonly hideModal: () => void;
 	readonly type: 'directory' | 'file';
 }) {
-	const { openedEntry, reloadRootEntries } = useEditorView();
+	const { openedEntry, reloadRootEntries, setFocusedItem, setSelectedItems, setExpandedItems } = useEditorView();
 	const instanceParams = useInstanceClientIdParams();
 	const { mutate: addFolderFile, isPending } = useUpdateComponentFile();
 	const NewFileFolderSchema = z.object({
@@ -59,14 +60,14 @@ export function AddDirectoryOrFileModal({
 			return;
 		}
 		const splitPath = openedEntry.path.split('/');
-		const intoPath = (
+		const filePath = (
 			isDirectory(openedEntry)
 				? splitPath.slice(1)
 				: splitPath.slice(1, -1)
 		).join('/');
 		addFolderFile(
 			{
-				file: `${intoPath}/${data.name}`,
+				file: `${filePath}/${data.name}`,
 				project: openedEntry.project,
 				payload: type === 'directory' ? undefined : '',
 				...instanceParams,
@@ -76,10 +77,16 @@ export function AddDirectoryOrFileModal({
 					reloadRootEntries();
 					hideModal();
 					form.reset();
+					const treeId = [openedEntry.project, filePath, data.name].filter(excludeFalsy).join('/');
+					setFocusedItem(treeId);
+					setSelectedItems([treeId]);
+					if (type === 'directory') {
+						setExpandedItems(expandedItems => [...expandedItems, treeId]);
+					}
 				},
 			},
 		);
-	}, [addFolderFile, instanceParams, type, openedEntry, reloadRootEntries]);
+	}, [addFolderFile, setFocusedItem, setSelectedItems, setExpandedItems, instanceParams, type, openedEntry, reloadRootEntries]);
 
 	const onCancelClick = useCallback(() => {
 		hideModal();

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

@@ -15,10 +15,10 @@ export function DeleteDirectoryOrFileModal({
 	readonly setIsModalOpen: (value: boolean) => void;
 }) {
 	const instanceParams = useInstanceClientIdParams();
-	const { openedEntry, reloadRootEntries, setOpenedEntry } = useEditorView();
-	const isFolderSelected = isDirectory(openedEntry);
+	const { openedEntry, reloadRootEntries, setFocusedItem, setSelectedItems } = useEditorView();
+	const isDirectorySelected = isDirectory(openedEntry);
 	const isPackageSelected = !!openedEntry?.package;
-	const thing = isPackageSelected ? 'Package' : isFolderSelected ? 'Folder' : 'File';
+	const thing = isPackageSelected ? 'Package' : isDirectorySelected ? 'Directory' : 'File';
 	const { mutate: deleteFolderFile, isPending, isSuccess } = useDropComponent();
 
 	const handleDeleteFolderOrFile = useCallback(() => {
@@ -37,7 +37,9 @@ export function DeleteDirectoryOrFileModal({
 			{
 				onSuccess: () => {
 					setIsModalOpen(false);
-					setOpenedEntry(null);
+					const itemToFocus = !openedEntry.package && openedEntry.path.split('/').slice(0, -1).join('/');
+					setFocusedItem(itemToFocus || undefined);
+					setSelectedItems(itemToFocus ? [itemToFocus] : []);
 					reloadRootEntries();
 				},
 			},

src/lib/storage/sessionStorageKeys.ts

@@ -1,6 +1,6 @@
 export interface SessionStorageKeys {
-	'FileFocused/{instanceId}': true;
-	'FolderOpened/{instanceId}': true;
-	'FileSelected/{instanceId}': true;
+	'FileFocused/{entityId}': true;
+	'FolderOpened/{entityId}': true;
+	'FileSelected/{entityId}': true;
 	'ColumnDisplayed/{database}/{table}': true;
 }