From 350d5a0ba77ad14c594d60f74229dde169ad07cc Mon Sep 17 00:00:00 2001 From: filip mertens Date: Mon, 25 Sep 2023 09:28:55 +0200 Subject: [PATCH 1/4] fixing drag drop issues --- .../src/app/tabs/locales/en/filePanel.json | 3 ++ .../drag-n-drop/src/lib/drag-n-drop.tsx | 23 +++++++++++++-- .../src/lib/components/file-explorer.tsx | 28 +++++++++++++++---- 3 files changed, 46 insertions(+), 8 deletions(-) diff --git a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json index cdc270f480..0554b0ffa7 100644 --- a/apps/remix-ide/src/app/tabs/locales/en/filePanel.json +++ b/apps/remix-ide/src/app/tabs/locales/en/filePanel.json @@ -73,6 +73,7 @@ "filePanel.features": "Features", "filePanel.upgradeability": "Upgradeability", "filePanel.ok": "OK", + "filePanel.yes": "Yes", "filePanel.cancel": "Cancel", "filePanel.createNewWorkspace": "create a new workspace", "filePanel.connectToLocalhost": "connect to localhost", @@ -115,6 +116,8 @@ "filePanel.validationErrorMsg": "Special characters are not allowed", "filePanel.reservedKeyword": "Reserved Keyword", "filePanel.reservedKeywordMsg": "File name contains Remix reserved keywords. \"{content}\"", + "filePanel.moveFile": "Moving files", + "filePanel.moveFileMsg1": "Are you sure you want to move {src} to {dest}?", "filePanel.movingFileFailed": "Moving File Failed", "filePanel.movingFileFailedMsg": "Unexpected error while moving file: {src}", "filePanel.movingFolderFailed": "Moving Folder Failed", diff --git a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx index 6d991d9663..ec68db4a7e 100644 --- a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx +++ b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx @@ -27,6 +27,11 @@ export const Draggable = (props: DraggableType) => { destination = props.file, context = useContext(MoveContext) + // delay timer + const [timer, setTimer] = useState() + // folder to open + const [folderToOpen, setFolderToOpen] = useState() + const handleDrop = (event: React.DragEvent) => { event.preventDefault() @@ -50,8 +55,15 @@ export const Draggable = (props: DraggableType) => { const handleDragover = (event: React.DragEvent) => { //Checks if the folder is opened event.preventDefault() - if (destination.isDirectory && !props.expandedPath.includes(destination.path)) { - props.handleClickFolder(destination.path, destination.type) + if (destination.isDirectory && !props.expandedPath.includes(destination.path) && folderToOpen !== destination.path && props.handleClickFolder) { + setFolderToOpen(destination.path) + timer && clearTimeout(timer) + setTimer( + setTimeout(() => { + props.handleClickFolder(destination.path, destination.type) + setFolderToOpen(null) + }, 500) + ) } } @@ -75,7 +87,12 @@ export const Draggable = (props: DraggableType) => { onDrop={(event) => { handleDrop(event) }} - onDragStart={() => { + onDragStart={(event) => { + if(destination && destination.path === '/'){ + event.preventDefault() + event.stopPropagation + }else + if (destination) { handleDrag() } diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx index 70ebf68898..8bbdfa1c08 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx @@ -9,7 +9,7 @@ import '../css/file-explorer.css' import {checkSpecialChars, extractNameFromKey, extractParentFromKey, joinPath} from '@remix-ui/helper' // eslint-disable-next-line @typescript-eslint/no-unused-vars import {FileRender} from './file-render' -import {Drag} from '@remix-ui/drag-n-drop' +import {Drag, Draggable} from '@remix-ui/drag-n-drop' import {ROOT_PATH} from '../utils/constants' export const FileExplorer = (props: FileExplorerProps) => { @@ -290,8 +290,15 @@ export const FileExplorer = (props: FileExplorerProps) => { } const handleFileMove = (dest: string, src: string) => { - try { - props.dispatchMoveFile(src, dest) + try{ + props.modal( + intl.formatMessage({id: 'filePanel.moveFile'}), + intl.formatMessage({id: 'filePanel.moveFileMsg1'}, {src, dest}), + intl.formatMessage({id: 'filePanel.yes'}), + () => props.dispatchMoveFile(src, dest), + intl.formatMessage({id: 'filePanel.cancel'}), + () => {} + ) } catch (error) { props.modal( intl.formatMessage({id: 'filePanel.movingFileFailed'}), @@ -300,11 +307,19 @@ export const FileExplorer = (props: FileExplorerProps) => { async () => {} ) } + } const handleFolderMove = (dest: string, src: string) => { try { - props.dispatchMoveFolder(src, dest) + props.modal( + intl.formatMessage({id: 'filePanel.moveFile'}), + intl.formatMessage({id: 'filePanel.moveFileMsg1'}, {src, dest}), + intl.formatMessage({id: 'filePanel.yes'}), + () => props.dispatchMoveFolder(src, dest), + intl.formatMessage({id: 'filePanel.cancel'}), + () => {} + ) } catch (error) { props.modal( intl.formatMessage({id: 'filePanel.movingFolderFailed'}), @@ -337,7 +352,7 @@ export const FileExplorer = (props: FileExplorerProps) => { } expand={true} > -
+
{files[ROOT_PATH] && Object.keys(files[ROOT_PATH]).map((key, index) => ( @@ -362,6 +377,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
+ +
+
From ecf171fa8315976de719afba21ce59d43c5fbe23 Mon Sep 17 00:00:00 2001 From: filip mertens Date: Mon, 25 Sep 2023 09:36:49 +0200 Subject: [PATCH 2/4] lint --- .../src/lib/components/file-explorer.tsx | 39 +++++++++---------- 1 file changed, 19 insertions(+), 20 deletions(-) diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx index 8bbdfa1c08..2fa15a10a5 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx @@ -290,41 +290,40 @@ export const FileExplorer = (props: FileExplorerProps) => { } const handleFileMove = (dest: string, src: string) => { - try{ - props.modal( - intl.formatMessage({id: 'filePanel.moveFile'}), - intl.formatMessage({id: 'filePanel.moveFileMsg1'}, {src, dest}), - intl.formatMessage({id: 'filePanel.yes'}), - () => props.dispatchMoveFile(src, dest), - intl.formatMessage({id: 'filePanel.cancel'}), - () => {} - ) + try { + props.modal( + intl.formatMessage({ id: 'filePanel.moveFile' }), + intl.formatMessage({ id: 'filePanel.moveFileMsg1' }, { src, dest }), + intl.formatMessage({ id: 'filePanel.yes' }), + () => props.dispatchMoveFile(src, dest), + intl.formatMessage({ id: 'filePanel.cancel' }), + () => {} + ) } catch (error) { props.modal( - intl.formatMessage({id: 'filePanel.movingFileFailed'}), - intl.formatMessage({id: 'filePanel.movingFileFailedMsg'}, {src}), - intl.formatMessage({id: 'filePanel.close'}), + intl.formatMessage({ id: 'filePanel.movingFileFailed' }), + intl.formatMessage({ id: 'filePanel.movingFileFailedMsg' }, { src }), + intl.formatMessage({ id: 'filePanel.close' }), async () => {} ) } - } const handleFolderMove = (dest: string, src: string) => { try { props.modal( - intl.formatMessage({id: 'filePanel.moveFile'}), - intl.formatMessage({id: 'filePanel.moveFileMsg1'}, {src, dest}), - intl.formatMessage({id: 'filePanel.yes'}), + intl.formatMessage({ id: 'filePanel.moveFile' }), + intl.formatMessage({ id: 'filePanel.moveFileMsg1' }, { src, dest }), + intl.formatMessage({ id: 'filePanel.yes' }), () => props.dispatchMoveFolder(src, dest), - intl.formatMessage({id: 'filePanel.cancel'}), + intl.formatMessage({ id: 'filePanel.cancel' }), () => {} ) } catch (error) { props.modal( - intl.formatMessage({id: 'filePanel.movingFolderFailed'}), - intl.formatMessage({id: 'filePanel.movingFolderFailedMsg'}, {src}), - intl.formatMessage({id: 'filePanel.close'}), + intl.formatMessage({ id: 'filePanel.movingFolderFailed' }), + intl.formatMessage({ id: 'filePanel.movingFolderFailedMsg' }, { src }), + intl.formatMessage({ id: 'filePanel.close' }), async () => {} ) } From 3320e8b94c6b505bd2a00373be1dc64dfd5518f7 Mon Sep 17 00:00:00 2001 From: filip mertens Date: Wed, 27 Sep 2023 15:27:49 +0200 Subject: [PATCH 3/4] prevent unneeded modals --- apps/remix-ide/src/app/files/fileManager.ts | 44 +++++++++++++++++++ .../drag-n-drop/src/lib/drag-n-drop.tsx | 2 +- .../workspace/src/lib/actions/index.ts | 13 ++++++ .../src/lib/components/file-explorer.tsx | 12 +++-- 4 files changed, 67 insertions(+), 4 deletions(-) diff --git a/apps/remix-ide/src/app/files/fileManager.ts b/apps/remix-ide/src/app/files/fileManager.ts index e24680e91f..0a80758214 100644 --- a/apps/remix-ide/src/app/files/fileManager.ts +++ b/apps/remix-ide/src/app/files/fileManager.ts @@ -904,6 +904,50 @@ class FileManager extends Plugin { return exists } + + async moveFileIsAllowed (src: string, dest: string) { + try { + src = this.normalize(src) + dest = this.normalize(dest) + src = this.limitPluginScope(src) + dest = this.limitPluginScope(dest) + await this._handleExists(src, `Cannot move ${src}. Path does not exist.`) + await this._handleExists(dest, `Cannot move content into ${dest}. Path does not exist.`) + await this._handleIsFile(src, `Cannot move ${src}. Path is not a file.`) + await this._handleIsDir(dest, `Cannot move content into ${dest}. Path is not directory.`) + const fileName = helper.extractNameFromKey(src) + + if (await this.exists(dest + '/' + fileName)) { + return false + } + return true + } catch (e) { + console.log(e) + return false + } + } + + async moveDirIsAllowed (src: string, dest: string) { + try { + src = this.normalize(src) + dest = this.normalize(dest) + src = this.limitPluginScope(src) + dest = this.limitPluginScope(dest) + await this._handleExists(src, `Cannot move ${src}. Path does not exist.`) + await this._handleExists(dest, `Cannot move content into ${dest}. Path does not exist.`) + await this._handleIsDir(src, `Cannot move ${src}. Path is not directory.`) + await this._handleIsDir(dest, `Cannot move content into ${dest}. Path is not directory.`) + const dirName = helper.extractNameFromKey(src) + if (await this.exists(dest + '/' + dirName) || src === dest) { + return false + } + return true + } catch (e) { + console.log(e) + return false + } + } + /** * Moves a file to a new folder * @param {string} src path of the source file diff --git a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx index ec68db4a7e..96259d6d41 100644 --- a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx +++ b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx @@ -62,7 +62,7 @@ export const Draggable = (props: DraggableType) => { setTimeout(() => { props.handleClickFolder(destination.path, destination.type) setFolderToOpen(null) - }, 500) + }, 600) ) } } diff --git a/libs/remix-ui/workspace/src/lib/actions/index.ts b/libs/remix-ui/workspace/src/lib/actions/index.ts index e34b9db417..9b8691319d 100644 --- a/libs/remix-ui/workspace/src/lib/actions/index.ts +++ b/libs/remix-ui/workspace/src/lib/actions/index.ts @@ -514,3 +514,16 @@ export const moveFolder = async (src: string, dest: string) => { dispatch(displayPopUp('Oops! An error ocurred while performing moveDir operation.' + error)) } } + +export const moveFileIsAllowed = async (src: string, dest: string) => { + const fileManager = plugin.fileManager + const isAllowed = await fileManager.moveFileIsAllowed(src, dest) + return isAllowed +} + +export const moveFolderIsAllowed = async (src: string, dest: string) => { + const fileManager = plugin.fileManager + const isAllowed = await fileManager.moveDirIsAllowed(src, dest) + return isAllowed +} + diff --git a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx index 13f9c34120..eb2f773e3a 100644 --- a/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx +++ b/libs/remix-ui/workspace/src/lib/components/file-explorer.tsx @@ -11,6 +11,7 @@ import {checkSpecialChars, extractNameFromKey, extractParentFromKey, joinPath} f import {FileRender} from './file-render' import {Drag, Draggable} from '@remix-ui/drag-n-drop' import {ROOT_PATH} from '../utils/constants' +import { moveFileIsAllowed, moveFolderIsAllowed } from '../actions' export const FileExplorer = (props: FileExplorerProps) => { const intl = useIntl() @@ -289,7 +290,8 @@ export const FileExplorer = (props: FileExplorerProps) => { props.dispatchHandleExpandPath(expandPath) } - const handleFileMove = (dest: string, src: string) => { + const handleFileMove = async (dest: string, src: string) => { + if(await moveFileIsAllowed(src, dest) === false) return try { props.modal( intl.formatMessage({ id: 'filePanel.moveFile' }), @@ -309,7 +311,8 @@ export const FileExplorer = (props: FileExplorerProps) => { } } - const handleFolderMove = (dest: string, src: string) => { + const handleFolderMove = async (dest: string, src: string) => { + if(await moveFolderIsAllowed(src, dest) === false) return try { props.modal( intl.formatMessage({ id: 'filePanel.moveFile' }), @@ -354,7 +357,7 @@ export const FileExplorer = (props: FileExplorerProps) => { -
+
{files[ROOT_PATH] && Object.keys(files[ROOT_PATH]).map((key, index) => ( @@ -378,6 +381,9 @@ export const FileExplorer = (props: FileExplorerProps) => { ))}
+ +
+
From 9a5f725059c190ef9f1d60e056a504904fd5ac0f Mon Sep 17 00:00:00 2001 From: bunsenstraat Date: Wed, 27 Sep 2023 17:25:01 +0200 Subject: [PATCH 4/4] Update drag-n-drop.tsx --- libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx index 96259d6d41..6427dbed12 100644 --- a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx +++ b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx @@ -88,10 +88,10 @@ export const Draggable = (props: DraggableType) => { handleDrop(event) }} onDragStart={(event) => { - if(destination && destination.path === '/'){ + if (destination && destination.path === '/'){ event.preventDefault() event.stopPropagation - }else + } else if (destination) { handleDrag()