fixing drag drop issues

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",

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<NodeJS.Timeout>()
+  // folder to open
+  const [folderToOpen, setFolderToOpen] = useState<string>()
+
   const handleDrop = (event: React.DragEvent<HTMLSpanElement>) => {
     event.preventDefault()
 
@@ -50,8 +55,15 @@ export const Draggable = (props: DraggableType) => {
   const handleDragover = (event: React.DragEvent<HTMLSpanElement>) => {
     //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()
             }

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}
           >
-            <div className="pb-4 mb-4">
+            <div className="">
               <TreeView id="treeViewMenu">
                 {files[ROOT_PATH] &&
                   Object.keys(files[ROOT_PATH]).map((key, index) => (
@@ -362,6 +377,9 @@ export const FileExplorer = (props: FileExplorerProps) => {
               </TreeView>
             </div>
           </TreeViewItem>
+          <Draggable isDraggable={false} file={{ name: '/', path: '/', type: 'folder', isDirectory: true }} expandedPath={props.expandPath} handleClickFolder={null}>
+            <div className='d-block w-100 pb-4 mb-4'></div>
+          </Draggable>
         </TreeView>
       </div>
     </Drag>