fix: Dragging and dropping outside content in servers list (#1853)

* fix: Verify on drag servers if not a server was selected

* fix: Verify if draggable is from server list and prevent DragEnter change

* Prevent drag/drop events from outside on sidebar

Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>

src/ui/components/SideBar/useSorting.tsx

@@ -24,35 +24,47 @@ export const useSorting = (servers: Server[]): {
     event.dataTransfer.dropEffect = 'move';
     event.dataTransfer.effectAllowed = 'move';
     setDraggedServerUrl(url);
-    setServersSorting(servers.map(({ url }) => url));
   };
 
   const handleDragEnd = (): void => {
     setDraggedServerUrl(null);
     setServersSorting(null);
   };
 
-  const handleDragEnter = (targetServerUrl: string) => () => {
-    setServersSorting((serversSorting) => serversSorting.map((url) => {
-      if (url === targetServerUrl) {
-        return draggedServerUrl;
-      }
+  const handleDragEnter = (targetServerUrl: string) => (event: DragEvent) => {
+    if (event.dataTransfer.types.length > 0) {
+      event.preventDefault();
+      return;
+    }
 
-      if (url === draggedServerUrl) {
-        return targetServerUrl;
+    setServersSorting((serversSorting) => {
+      if (serversSorting === null || draggedServerUrl == null) {
+        return servers.map(({ url }) => url);
       }
 
-      return url;
-    }));
+      return serversSorting.map((url) => {
+        if (url === targetServerUrl) {
+          return draggedServerUrl;
+        }
+
+        if (url === draggedServerUrl) {
+          return targetServerUrl;
+        }
+
+        return url;
+      });
+    });
   };
 
   const dispatch = useDispatch<Dispatch<RootAction>>();
 
   const handleDrop = (url: string) => (event: DragEvent) => {
     event.preventDefault();
 
-    dispatch({ type: SIDE_BAR_SERVERS_SORTED, payload: serversSorting });
-    dispatch({ type: SIDE_BAR_SERVER_SELECTED, payload: url });
+    if (event.dataTransfer.types.length === 0) {
+      dispatch({ type: SIDE_BAR_SERVERS_SORTED, payload: serversSorting });
+      dispatch({ type: SIDE_BAR_SERVER_SELECTED, payload: url });
+    }
   };
 
   const sortedServers = serversSorting