[WEB-1907] Fix/favorite move out of folder

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();
 
@@ -93,12 +94,12 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
     const element = elementRef.current;
 
     if (!element) return;
-    const initialData = { type: "PARENT", id: favorite.id };
+    const initialData = { type: "PARENT", id: favorite.id, is_folder: favorite.is_folder };
 
     return combine(
       draggable({
         element,
-        // getInitialData: () => initialData,
+        getInitialData: () => initialData,
         onDragStart: () => setIsDragging(true),
         onDrop: (data) => {
           setIsDraggedOver(false);
@@ -109,7 +110,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
             const edge = extractClosestEdge(destinationData) || undefined;
             const payload = {
               id: favorite.id,
-              sequence: getDestinationStateSequence(favoriteMap, destinationData.id as string, edge),
+              sequence: Math.round(getDestinationStateSequence(favoriteMap, destinationData.id as string, edge) || 0),
             };
 
             handleOnDropFolder(payload);
@@ -127,7 +128,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
         onDragEnter: (args) => {
           setIsDragging(true);
           setIsDraggedOver(true);
-          setClosestEdge(extractClosestEdge(args.self.data));
+          args.source.data.is_folder && setClosestEdge(extractClosestEdge(args.self.data));
         },
         onDragLeave: () => {
           setIsDragging(false);
@@ -142,7 +143,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
           setIsDraggedOver(false);
           const sourceId = source?.data?.id as string | undefined;
           const destinationId = self?.data?.id as string | undefined;
-
+          if (source.data.is_folder) return;
           if (sourceId === destinationId) return;
           if (!sourceId || !destinationId) return;
           if (favoriteMap[sourceId].parent === destinationId) return;
@@ -312,6 +313,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
@@ -139,7 +161,7 @@ export const FavoriteItem = observer(
             {getIcon()}
 
             {!sidebarCollapsed && (
-              <Link href={getLink()} className="text-sm leading-5 font-medium flex-1">
+              <Link href={getLink()} className="text-sm leading-5 font-medium flex-1 truncate">
                 {favorite.entity_data ? favorite.entity_data.name : favorite.name}
               </Link>
             )}

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

@@ -3,7 +3,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
-import { orderBy } from "lodash";
+import { orderBy, uniqBy } from "lodash";
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ChevronRight, FolderPlus } from "lucide-react";
@@ -131,7 +131,7 @@ export const SidebarFavoritesMenu = observer(() => {
             )}
           >
             <span onClick={() => toggleFavoriteMenu(!isFavoriteMenuOpen)} className="flex-1 text-start">
-              MY FAVORITES
+              YOUR FAVORITES
             </span>
             <span className="flex gap-2 flex-shrink-0 opacity-0 pointer-events-none group-hover/workspace-button:opacity-100 group-hover/workspace-button:pointer-events-auto rounded p-0.5 ">
               <FolderPlus
@@ -168,7 +168,7 @@ export const SidebarFavoritesMenu = observer(() => {
               static
             >
               {createNewFolder && <NewFavoriteFolder setCreateNewFolder={setCreateNewFolder} actionType="create" />}
-              {orderBy(Object.values(favoriteMap), "sequence", "desc")
+              {uniqBy(orderBy(Object.values(favoriteMap), "sequence", "desc"), "id")
                 .filter((fav) => !fav.parent)
                 .map((fav, index) => (
                   <Tooltip
@@ -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>
                 ))}

web/core/store/cycle.store.ts

@@ -551,6 +551,7 @@ export class CycleStore implements ICycleStore {
   deleteCycle = async (workspaceSlug: string, projectId: string, cycleId: string) =>
     await this.cycleService.deleteCycle(workspaceSlug, projectId, cycleId).then(() => {
       runInAction(() => {
+        this.rootStore.favorite.removeFavoriteFromStore(cycleId);
         delete this.cycleMap[cycleId];
         delete this.activeCycleIdMap[cycleId];
       });