[WEB-1907] Fix/favorite move out of folder (#5305)

* fix: fav feature review changes

* fix: enabled moving out of folder on hovering

* fix: removed consoles

web/core/components/workspace/sidebar/favorites/favorite-folder.tsx

@@ -28,10 +28,11 @@ type Props = {
   isLastChild: boolean;
   favorite: IFavorite;
   handleRemoveFromFavorites: (favorite: IFavorite) => void;
+  handleRemoveFromFavoritesFolder: (favoriteId: string) => void;
 };
 
 export const FavoriteFolder: React.FC<Props> = (props) => {
-  const { favorite, handleRemoveFromFavorites } = props;
+  const { favorite, handleRemoveFromFavorites, handleRemoveFromFavoritesFolder } = props;
   // store hooks
   const { sidebarCollapsed: isSidebarCollapsed } = useAppTheme();
 
@@ -317,6 +318,8 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                       key={child.id}
                       favorite={child}
                       handleRemoveFromFavorites={handleRemoveFromFavorites}
+                      handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder}
+                      favoriteMap={favoriteMap}
                     />
                   ))}
                 </Disclosure.Panel>

web/core/components/workspace/sidebar/favorites/favorite-item.tsx

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams } from "next/navigation";
@@ -22,11 +22,15 @@ import { usePlatformOS } from "@/hooks/use-platform-os";
 
 export const FavoriteItem = observer(
   ({
+    favoriteMap,
     favorite,
     handleRemoveFromFavorites,
+    handleRemoveFromFavoritesFolder,
   }: {
     favorite: IFavorite;
+    favoriteMap: Record<string, IFavorite>;
     handleRemoveFromFavorites: (favorite: IFavorite) => void;
+    handleRemoveFromFavoritesFolder: (favoriteId: string) => void;
   }) => {
     // store hooks
     const { sidebarCollapsed } = useAppTheme();
@@ -101,6 +105,24 @@ export const FavoriteItem = observer(
           onDrop: () => {
             setIsDragging(false);
           },
+        }),
+        dropTargetForElements({
+          element,
+          onDragStart: () => {
+            setIsDragging(true);
+          },
+          onDragEnter: () => {
+            setIsDragging(true);
+          },
+          onDragLeave: () => {
+            setIsDragging(false);
+          },
+          onDrop: ({ source }) => {
+            setIsDragging(false);
+            const sourceId = source?.data?.id as string | undefined;
+            if (!sourceId || !favoriteMap[sourceId].parent) return;
+            handleRemoveFromFavoritesFolder(sourceId);
+          },
         })
       );
       // eslint-disable-next-line react-hooks/exhaustive-deps

web/core/components/workspace/sidebar/favorites/favorites-menu.tsx

@@ -184,9 +184,15 @@ export const SidebarFavoritesMenu = observer(() => {
                         favorite={fav}
                         isLastChild={index === favoriteIds.length - 1}
                         handleRemoveFromFavorites={handleRemoveFromFavorites}
+                        handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder}
                       />
                     ) : (
-                      <FavoriteItem favorite={fav} handleRemoveFromFavorites={handleRemoveFromFavorites} />
+                      <FavoriteItem
+                        favorite={fav}
+                        handleRemoveFromFavorites={handleRemoveFromFavorites}
+                        handleRemoveFromFavoritesFolder={handleRemoveFromFavoritesFolder}
+                        favoriteMap={favoriteMap}
+                      />
                     )}
                   </Tooltip>
                 ))}