Skip to content

Commit 05052d7

Browse files
dawsontothdawsontoth
committed
feat: Add directory
1 parent a9a4991 commit 05052d7

File tree

4 files changed

+54
-42
lines changed

4 files changed

+54
-42
lines changed

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

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -38,18 +38,22 @@ export function ApplicationsSidebar() {
3838
}
3939
}, [openedEntry, focusedItem, items]);
4040

41-
// TODO: add file
42-
// TODO: add folder
41+
// TODO: application command with shortcuts for a new file and folder
4342
// TODO: delete file
4443
// TODO: delete folder
4544
// TODO: redeploy package
4645
// TODO: restart cluster
4746
// TODO: onRenameItem f2 handling
4847
// TODO: on drag item from one folder to another
49-
// TODO: context menu right click
48+
5049
// TODO: stick packages under a different top level node
5150
// TODO: icon showing package is read-only
51+
52+
// TODO: context menu when right click on tree
5253
// TODO: on drop file or folder from outside the editor to upload stuff rapidly
54+
// TODO: open file after creating it
55+
// TODO: select folder after creating it
56+
5357
return (
5458
<div className="h-full overflow-auto pr-1.5">
5559
<ControlledTreeEnvironment

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

Lines changed: 23 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ import { isLocalStudio } from '@/config/constants';
44
import { useInstanceClientIdParams } from '@/config/useInstanceClient';
55
import { isDirectory } from '@/features/instance/applications/context/isDirectory';
66
import { useEditorView } from '@/features/instance/applications/hooks/useEditorView';
7-
import { AddFolderFileModal } from '@/features/instance/applications/modals/AddFolderFileModal';
7+
import { AddDirectoryOrFileModal } from '@/features/instance/applications/modals/AddDirectoryOrFileModal';
88
import { DeleteFolderFileModal } from '@/features/instance/applications/modals/DeleteFolderFileModal';
99
import { RedeployApplicationModal } from '@/features/instance/applications/modals/RedeployApplicationModal';
10-
import { useDeleteComponentFolderFile } from '@/features/instance/operations/mutations/deleteComponentFolderFile';
1110
import { useDeployComponentMutation } from '@/features/instance/operations/mutations/deployComponent';
11+
import { useDropComponent } from '@/features/instance/operations/mutations/dropComponent';
1212
import { useEffectedState } from '@/hooks/useEffectedState';
1313
import { useToggler } from '@/hooks/useToggler';
1414
import { parseFileExtension } from '@/lib/string/parseFileExtension';
@@ -112,14 +112,19 @@ export function TextEditorView() {
112112
}, [mountedRef, onSaveClick, onDiscardClick]);
113113

114114
const {
115-
toggled: isAddFolderOrFileClicked,
116-
toggleOn: onNewFileClick,
117-
setToggled: setIsAddFolderOrFileClicked,
115+
toggled: isAddingDirectory,
116+
toggleOn: onAddDirectoryClicked,
117+
toggleOff: hideAddingDirectory,
118118
} = useToggler(false);
119-
const { toggled: isAddingFolder, toggleOn: setIsAddingFolder } = useToggler(false);
120-
const { toggled: isDeleteFolderOrFileClicked, setToggled: setIsDeleteFolderOrFileClicked } = useToggler(false);
119+
const { toggled: isAddingFile, toggleOn: onAddFileClicked, toggleOff: hideAddingFile } = useToggler(false);
120+
const { toggled: isDeleteDirectoryOrFileClicked, setToggled: setIsDeleteDirectoryOrFileClicked } = useToggler(false);
121121
const { toggled: isRedeployApplicationClicked, setToggled: setIsRedeployApplicationClicked } = useToggler(false);
122-
const { mutate: deleteFolderFile, isPending: isDeleteFolderFilePending } = useDeleteComponentFolderFile();
122+
const { mutate: deleteFolderFile, isPending: isDeleteFolderFilePending } = useDropComponent();
123+
124+
const onHideAddDirectoryModal = useCallback(() => {
125+
hideAddingDirectory();
126+
hideAddingFile();
127+
}, []);
123128

124129
const handleDeleteFolderOrFile = useCallback(async () => {
125130
if (!openedEntry) {
@@ -145,7 +150,7 @@ export function TextEditorView() {
145150
// pkg: '',
146151
// });
147152
// refetchComponents();
148-
setIsDeleteFolderOrFileClicked(false);
153+
setIsDeleteDirectoryOrFileClicked(false);
149154
},
150155
},
151156
);
@@ -192,7 +197,7 @@ export function TextEditorView() {
192197

193198

194199
const onDeleteClick = useCallback(() => {
195-
setIsDeleteFolderOrFileClicked(true);
200+
setIsDeleteDirectoryOrFileClicked(true);
196201
}, []);
197202

198203
if (!openedEntry) {
@@ -260,7 +265,7 @@ export function TextEditorView() {
260265
<Button
261266
variant="ghost"
262267
className="rounded-none"
263-
onClick={onNewFileClick}
268+
onClick={onAddFileClicked}
264269
accessKey="n"
265270
>
266271
<FileIcon />
@@ -270,7 +275,7 @@ export function TextEditorView() {
270275
<Button
271276
variant="ghost"
272277
className="rounded-none"
273-
onClick={setIsAddingFolder}
278+
onClick={onAddDirectoryClicked}
274279
accessKey="n"
275280
>
276281
<FolderIcon />
@@ -324,14 +329,14 @@ export function TextEditorView() {
324329

325330
</div>
326331

327-
<AddFolderFileModal
328-
isModalOpen={isAddFolderOrFileClicked}
329-
setIsModalOpen={setIsAddFolderOrFileClicked}
330-
isAddingFolder={isAddingFolder}
332+
<AddDirectoryOrFileModal
333+
isModalOpen={isAddingDirectory || isAddingFile}
334+
hideModal={onHideAddDirectoryModal}
335+
type={isAddingDirectory ? 'directory' : 'file'}
331336
/>
332337
<DeleteFolderFileModal
333-
isModalOpen={isDeleteFolderOrFileClicked}
334-
setIsModalOpen={setIsDeleteFolderOrFileClicked}
338+
isModalOpen={isDeleteDirectoryOrFileClicked}
339+
setIsModalOpen={setIsDeleteDirectoryOrFileClicked}
335340
isFolderSelected={isDirectory(openedEntry)}
336341
isPackageSelected={!!openedEntry.package}
337342
isPending={isDeleteFolderFilePending}

src/features/instance/applications/modals/AddFolderFileModal.tsx renamed to src/features/instance/applications/modals/AddDirectoryOrFileModal.tsx

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,14 @@ import { useCallback } from 'react';
2424
import { useForm } from 'react-hook-form';
2525
import z from 'zod';
2626

27-
export function AddFolderFileModal({
27+
export function AddDirectoryOrFileModal({
2828
isModalOpen = false,
29-
setIsModalOpen,
30-
isAddingFolder,
29+
hideModal,
30+
type,
3131
}: {
3232
readonly isModalOpen?: boolean;
33-
readonly setIsModalOpen: (value: boolean) => void;
34-
readonly isAddingFolder?: boolean;
33+
readonly hideModal: () => void;
34+
readonly type: 'directory' | 'file';
3535
}) {
3636
const { openedEntry, reloadRootEntries } = useEditorView();
3737
const instanceParams = useInstanceClientIdParams();
@@ -68,33 +68,33 @@ export function AddFolderFileModal({
6868
{
6969
file: `${intoPath}/${data.name}`,
7070
project: openedEntry.project,
71-
payload: isAddingFolder ? undefined : '',
71+
payload: type === 'directory' ? undefined : '',
7272
...instanceParams,
7373
},
7474
{
7575
onSuccess: () => {
7676
reloadRootEntries();
77-
setIsModalOpen(false);
77+
hideModal();
7878
form.reset();
7979
},
8080
},
8181
);
82-
}, [addFolderFile, instanceParams, isAddingFolder, openedEntry, reloadRootEntries]);
82+
}, [addFolderFile, instanceParams, type, openedEntry, reloadRootEntries]);
8383

8484
const onCancelClick = useCallback(() => {
85-
setIsModalOpen(false);
85+
hideModal();
8686
form.reset();
87-
}, [setIsModalOpen, form]);
87+
}, [hideModal, form]);
8888

8989
return (
90-
<Dialog onOpenChange={setIsModalOpen} open={isModalOpen}>
90+
<Dialog onOpenChange={hideModal} open={isModalOpen}>
9191
<DialogContent aria-describedby={undefined} className="text-white">
9292
<Form {...form}>
9393
<form onSubmit={form.handleSubmit(submitForm)}>
9494
<DialogHeader>
95-
<DialogTitle>Add {isAddingFolder ? 'Folder' : 'File'}</DialogTitle>
95+
<DialogTitle>Add {type}</DialogTitle>
9696
<DialogDescription>
97-
Enter the name of the {isAddingFolder ? 'folder' : 'file'} you want to add:
97+
Enter the name of the {type} you want to add:
9898
</DialogDescription>
9999
</DialogHeader>
100100

@@ -103,13 +103,11 @@ export function AddFolderFileModal({
103103
name="name"
104104
render={({ field }) => (
105105
<FormItem className="my-2">
106-
<FormLabel>{isAddingFolder ? 'Folder' : 'File'} Name</FormLabel>
106+
<FormLabel>Name</FormLabel>
107107
<FormControl>
108108
<Input
109109
disabled={isPending}
110110
type="text"
111-
placeholder={`${isAddingFolder ? 'New Folder' : 'New File'}`}
112-
className=""
113111
{...field}
114112
/>
115113
</FormControl>
@@ -129,7 +127,7 @@ export function AddFolderFileModal({
129127
className="rounded-full"
130128
disabled={isPending}
131129
>
132-
<Plus /> Add {isAddingFolder ? 'Folder' : 'File'}
130+
<Plus /> Add {type}
133131
</Button>
134132
</div>
135133
</DialogFooter>

src/features/instance/operations/mutations/deleteComponentFolderFile.ts renamed to src/features/instance/operations/mutations/dropComponent.ts

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,18 @@ import { InstanceClientConfig } from '@/config/instanceClientConfig';
22
import { ReplicatedResponse } from '@/lib/api/replication';
33
import { useMutation } from '@tanstack/react-query';
44

5-
interface DeleteComponentFileRequest extends InstanceClientConfig {
5+
interface DropComponentRequest extends InstanceClientConfig {
66
project: string;
77
file: string | undefined;
88
replicated: boolean;
99
}
1010

11-
async function onDeleteComponentFolderFile({ file, project, replicated, instanceClient }: DeleteComponentFileRequest): Promise<ReplicatedResponse> {
11+
async function dropComponent({
12+
file,
13+
project,
14+
replicated,
15+
instanceClient,
16+
}: DropComponentRequest): Promise<ReplicatedResponse> {
1217
const { data } = await instanceClient.post('/', {
1318
operation: 'drop_component',
1419
file: file || undefined,
@@ -18,8 +23,8 @@ async function onDeleteComponentFolderFile({ file, project, replicated, instance
1823
return data;
1924
}
2025

21-
export function useDeleteComponentFolderFile() {
26+
export function useDropComponent() {
2227
return useMutation({
23-
mutationFn: onDeleteComponentFolderFile,
28+
mutationFn: dropComponent,
2429
});
2530
}

0 commit comments

Comments
 (0)