Skip to content

Commit 678bf43

Browse files
author
MargeBot
committed
Merge branch 'DRVWEB-4834' into 'main'
[fix/DRVWEB-4834] fix create folder modal when moving files See merge request web/clients!18386
2 parents a901e32 + 07ebcea commit 678bf43

File tree

5 files changed

+94
-71
lines changed

5 files changed

+94
-71
lines changed

‎applications/drive/src/app/components/modals/MoveToFolderModal/MoveToFolderModal.tsx‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,18 @@ import { useCreateFolderModal } from '../CreateFolderModal';
1616
import ModalContentLoader from '../ModalContentLoader';
1717
import { ModalContent } from './ModalContent';
1818

19+
type Item = {
20+
parentLinkId: string;
21+
linkId: string;
22+
rootShareId: string;
23+
volumeId: string;
24+
name?: string;
25+
isFile: boolean;
26+
};
27+
1928
interface Props {
2029
shareId: string;
21-
selectedItems: DecryptedLink[];
30+
selectedItems: Item[];
2231
onClose?: () => void;
2332
}
2433

@@ -67,7 +76,7 @@ const MoveToFolderModalDeprecated = ({ shareId, selectedItems, onClose, ...modal
6776
return;
6877
}
6978

70-
showCreateFolderModal({
79+
void showCreateFolderModal({
7180
folder: { shareId: shareId, linkId: targetLinkId },
7281
onCreateDone: async (newFolderId: string) => {
7382
expand(targetLinkId);

‎applications/drive/src/app/modals/CreateFolderModal/useCreateFolderModalState.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const useCreateFolderModalState = ({
6363
try {
6464
const newFolder = await drive.createFolder(parentFolderUid, name);
6565
const { volumeId } = splitNodeUid(parentFolderUid);
66-
const { node } = getNodeEntity(newFolder!);
66+
const { node } = getNodeEntity(newFolder);
6767
await events.pollEvents.volumes(volumeId);
6868
createNotification({
6969
type: 'success',

‎applications/drive/src/app/modals/MoveItemsModal/EmptyFileTreePlaceholder.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ interface Props {
77
onCreate: () => void;
88
}
99

10-
const EmptyFileTreePlaceholder = ({ onCreate }: Props) => {
10+
export const EmptyFileTreePlaceholder = ({ onCreate }: Props) => {
1111
const title = c('Title').t`You have no folders yet`;
1212
return (
1313
<div className="p-4 flex flex-column items-center w-full">
@@ -22,5 +22,3 @@ const EmptyFileTreePlaceholder = ({ onCreate }: Props) => {
2222
</div>
2323
);
2424
};
25-
26-
export default EmptyFileTreePlaceholder;

‎applications/drive/src/app/modals/MoveItemsModal/MoveItemsModalView.tsx‎

Lines changed: 62 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,11 @@ import { selectMessageForItemList } from '../../components/sections/helpers';
2020
import type { TreeItem } from '../../store';
2121
import { type DecryptedLink } from '../../store';
2222
import { getMovedFiles } from '../../utils/moveTexts';
23-
import EmptyFileTreePlaceholder from './EmptyFileTreePlaceholder';
23+
import { EmptyFileTreePlaceholder } from './EmptyFileTreePlaceholder';
24+
import type { MoveItemsModalStateItem } from './useMoveItemsModalState';
2425

2526
export type MoveItemsModalViewProps = {
26-
selectedItems: DecryptedLink[];
27+
selectedItems: MoveItemsModalStateItem[];
2728
handleSubmit: () => Promise<void>;
2829
rootItems: TreeItem[];
2930
createFolder: (parentFolderLinkId?: string) => void;
@@ -54,15 +55,6 @@ export const MoveItemsModalView = ({
5455
const { viewportWidth } = useActiveBreakpoint();
5556
const isSmallViewport = viewportWidth['<=small'];
5657

57-
if (isTreeLoaded && rootItems.length === 0) {
58-
return (
59-
<>
60-
<ModalTwoHeader closeButtonProps={{ disabled: loading }} />
61-
<EmptyFileTreePlaceholder onCreate={() => createFolder(targetFolderUid)} />
62-
</>
63-
);
64-
}
65-
6658
const itemsToMove = selectedItems.map((item) => item.linkId);
6759
const itemsToMoveCount = itemsToMove.length;
6860
const messages = getMovedFiles(itemsToMoveCount);
@@ -98,55 +90,65 @@ export const MoveItemsModalView = ({
9890
>
9991
{isTreeLoaded ? (
10092
<>
101-
<ModalTwoHeader title={title} closeButtonProps={{ disabled: loading }} />
102-
<ModalTwoContent>
103-
<Alert className="mb-4">{c('Info').t`Select a folder to move to.`}</Alert>
104-
{/* TODO: migrate FolderTree to SDK */}
105-
<FolderTree
106-
treeItems={rootItems}
107-
isLoaded={true}
108-
selectedItemId={treeSelectedFolder}
109-
onSelect={onTreeSelect}
110-
toggleExpand={toggleExpand}
111-
/>
112-
</ModalTwoContent>
113-
<ModalTwoFooter>
114-
<div className="flex justify-space-between w-full flex-nowrap">
115-
{isSmallViewport ? (
116-
<Button
117-
icon
118-
disabled={loading || !targetFolderUid}
119-
onClick={() => createFolder(targetFolderUid)}
120-
title={c('Action').t`Create new folder`}
121-
>
122-
<Icon name="folder-plus" />
123-
</Button>
124-
) : (
125-
<Button
126-
shape="underline"
127-
color="norm"
128-
disabled={loading || !targetFolderUid}
129-
onClick={() => createFolder(targetFolderUid)}
130-
>
131-
{c('Action').t`Create new folder`}
132-
</Button>
133-
)}
134-
<div>
135-
<Button type="reset" disabled={loading} autoFocus>
136-
{c('Action').t`Close`}
137-
</Button>
138-
<Button
139-
color="norm"
140-
className="ml-4"
141-
loading={loading}
142-
type="submit"
143-
disabled={isMoveDisabled}
144-
>
145-
{c('Action').t`Move`}
146-
</Button>
147-
</div>
148-
</div>
149-
</ModalTwoFooter>
93+
{rootItems.length === 0 && (
94+
<>
95+
<ModalTwoHeader closeButtonProps={{ disabled: loading }} />
96+
<EmptyFileTreePlaceholder onCreate={() => createFolder(targetFolderUid)} />
97+
</>
98+
)}
99+
{rootItems.length > 0 && (
100+
<>
101+
<ModalTwoHeader title={title} closeButtonProps={{ disabled: loading }} />
102+
<ModalTwoContent>
103+
<Alert className="mb-4">{c('Info').t`Select a folder to move to.`}</Alert>
104+
{/* TODO: migrate FolderTree to SDK */}
105+
<FolderTree
106+
treeItems={rootItems}
107+
isLoaded={true}
108+
selectedItemId={treeSelectedFolder}
109+
onSelect={onTreeSelect}
110+
toggleExpand={toggleExpand}
111+
/>
112+
</ModalTwoContent>
113+
<ModalTwoFooter>
114+
<div className="flex justify-space-between w-full flex-nowrap">
115+
{isSmallViewport ? (
116+
<Button
117+
icon
118+
disabled={loading || !targetFolderUid}
119+
onClick={() => createFolder(targetFolderUid)}
120+
title={c('Action').t`Create new folder`}
121+
>
122+
<Icon name="folder-plus" />
123+
</Button>
124+
) : (
125+
<Button
126+
shape="underline"
127+
color="norm"
128+
disabled={loading || !targetFolderUid}
129+
onClick={() => createFolder(targetFolderUid)}
130+
>
131+
{c('Action').t`Create new folder`}
132+
</Button>
133+
)}
134+
<div>
135+
<Button type="reset" disabled={loading} autoFocus>
136+
{c('Action').t`Close`}
137+
</Button>
138+
<Button
139+
color="norm"
140+
className="ml-4"
141+
loading={loading}
142+
type="submit"
143+
disabled={isMoveDisabled}
144+
>
145+
{c('Action').t`Move`}
146+
</Button>
147+
</div>
148+
</div>
149+
</ModalTwoFooter>
150+
</>
151+
)}
150152
</>
151153
) : (
152154
<ModalContentLoader>{c('Info').t`Loading`}</ModalContentLoader>

‎applications/drive/src/app/modals/MoveItemsModal/useMoveItemsModalState.ts‎

Lines changed: 19 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,23 @@ import { useState } from 'react';
33
import { type ModalStateProps, useModalTwoStatic } from '@proton/components';
44
import { generateNodeUid, splitNodeUid, useDrive } from '@proton/drive';
55

6+
import { useActiveShare } from '../../hooks/drive/useActiveShare';
67
import { type DecryptedLink, useDriveEventManager, useTreeForModals } from '../../store';
78
import { useSdkErrorHandler } from '../../utils/errorHandling/useSdkErrorHandler';
89
import { CreateFolderModal } from '../CreateFolderModal';
910
import { useMovedItemsNotification } from './useMovedItemsNotification';
1011

12+
export type MoveItemsModalStateItem = {
13+
volumeId: string;
14+
linkId: string;
15+
parentLinkId: string;
16+
rootShareId: string;
17+
isFile: boolean;
18+
};
19+
1120
export type UseMoveItemsModalStateProps = ModalStateProps & {
1221
shareId: string;
13-
// TODO: convert to NodeEntity when the old Modal is deleted
14-
selectedItems: DecryptedLink[];
22+
selectedItems: MoveItemsModalStateItem[];
1523
};
1624

1725
export const useMoveItemsModalState = ({
@@ -32,13 +40,14 @@ export const useMoveItemsModalState = ({
3240
const [createFolderModal, showCreateFolderModal] = useModalTwoStatic(CreateFolderModal);
3341
const { handleError } = useSdkErrorHandler();
3442
const [targetFolderUid, setTargetFolderUid] = useState<string>();
43+
const { activeFolder } = useActiveShare();
3544

3645
let treeSelectedFolder;
3746
if (targetFolderUid) {
3847
treeSelectedFolder = splitNodeUid(targetFolderUid).nodeId;
3948
}
4049

41-
const undoMove = async (itemMap: Record<string, DecryptedLink>, parentMap: Map<string, string>) => {
50+
const undoMove = async (itemMap: Record<string, { name: string }>, parentMap: Map<string, string>) => {
4251
const successIds = [];
4352
const failedIds = [];
4453
const volumeIdSet = new Set<string>();
@@ -126,13 +135,18 @@ export const useMoveItemsModalState = ({
126135
return;
127136
}
128137

138+
const targetVolumeId = selectedItemParentLinkId
139+
? activeFolder.volumeId
140+
: rootItems[0]?.link.volumeId || selectedItems[0]?.volumeId;
141+
const parentFolderUid = generateNodeUid(targetVolumeId, targetLinkId);
142+
129143
showCreateFolderModal({
130-
parentFolderUid: targetLinkId,
144+
parentFolderUid,
131145
onCreateDone: async (newFolderUid: string) => {
132146
setTargetFolderUid(newFolderUid);
133147

134148
// After creating the folder we want to expand its parent so it shows in the tree
135-
const { nodeId } = splitNodeUid(targetLinkId);
149+
const { nodeId } = splitNodeUid(parentFolderUid);
136150
expand(nodeId);
137151
},
138152
});

0 commit comments

Comments
 (0)