From 91e4da502a833ee9c19bceffdd1f3b580b09dcef Mon Sep 17 00:00:00 2001
From: Akshita Goyal <36129505+gakshita@users.noreply.github.com>
Date: Mon, 5 Aug 2024 17:06:53 +0530
Subject: [PATCH] [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
---
 .../sidebar/favorites/favorite-folder.tsx     |  5 +++-
 .../sidebar/favorites/favorite-item.tsx       | 24 ++++++++++++++++++-
 .../sidebar/favorites/favorites-menu.tsx      |  8 ++++++-
 3 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index 227a3d812..55ed717e3 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/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>
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-item.tsx b/web/core/components/workspace/sidebar/favorites/favorite-item.tsx
index 44317dcd7..4ef38c8c2 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-item.tsx
+++ b/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
diff --git a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx b/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
index 5581efe15..4dc0f40ec 100644
--- a/web/core/components/workspace/sidebar/favorites/favorites-menu.tsx
+++ b/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>
                 ))}