From d26fb8ce02c648cf118d653ce89cf53ecf972943 Mon Sep 17 00:00:00 2001
From: Vamsi Krishna <46787868+mathalav55@users.noreply.github.com>
Date: Mon, 6 Jan 2025 13:05:46 +0530
Subject: [PATCH] [WEB-2926]fix: added tooltips for favorites (#6320)

* * fix: added tooltips for favorites

* chore: code formatting
---
 web/core/components/issues/issue-modal/base.tsx   |  2 +-
 .../sidebar/favorites/favorite-folder.tsx         | 15 ++++++++++-----
 .../favorite-items/common/favorite-item-title.tsx | 11 +++++++----
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/web/core/components/issues/issue-modal/base.tsx b/web/core/components/issues/issue-modal/base.tsx
index a54bf81f6b..090cb41d39 100644
--- a/web/core/components/issues/issue-modal/base.tsx
+++ b/web/core/components/issues/issue-modal/base.tsx
@@ -3,9 +3,9 @@
 import React, { useEffect, useRef, useState } from "react";
 import { observer } from "mobx-react";
 import { useParams, usePathname } from "next/navigation";
+import { EIssuesStoreType } from "@plane/constants";
 import { useTranslation } from "@plane/i18n";
 // types
-import { EIssuesStoreType } from "@plane/constants";
 import type { TBaseIssue, TIssue } from "@plane/types";
 // ui
 import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
index 8806b2d081..9c0c4c54bb 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-folder.tsx
@@ -175,11 +175,16 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                     "justify-center": isSidebarCollapsed,
                   })}
                 >
-                  <Disclosure.Button as="button" className="size-8 aspect-square flex-shrink-0 grid place-items-center">
-                    <div className="size-4 grid place-items-center flex-shrink-0">
-                      <FavoriteFolderIcon />
-                    </div>
-                  </Disclosure.Button>
+                  <Tooltip tooltipContent={favorite.name} position="right" isMobile={isMobile}>
+                    <Disclosure.Button
+                      as="button"
+                      className="size-8 aspect-square flex-shrink-0 grid place-items-center"
+                    >
+                      <div className="size-4 grid place-items-center flex-shrink-0">
+                        <FavoriteFolderIcon />
+                      </div>
+                    </Disclosure.Button>
+                  </Tooltip>
                 </div>
               ) : (
                 <>
diff --git a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
index 98dcb033b5..0a0ed7c114 100644
--- a/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
+++ b/web/core/components/workspace/sidebar/favorites/favorite-items/common/favorite-item-title.tsx
@@ -2,6 +2,7 @@
 import React, { FC } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
+import { Tooltip } from "@plane/ui";
 import { useAppTheme } from "@/hooks/store";
 import { usePlatformOS } from "@/hooks/use-platform-os";
 
@@ -27,9 +28,11 @@ export const FavoriteItemTitle: FC<Props> = observer((props) => {
   };
 
   return (
-    <Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable onClick={handleOnClick}>
-      <span className="flex items-center justify-center size-5">{icon}</span>
-      {!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
-    </Link>
+    <Tooltip tooltipContent={title} isMobile={isMobile} disabled={!isSidebarCollapsed} position="right">
+      <Link href={href} className={isSidebarCollapsed ? collapsedClass : linkClass} draggable onClick={handleOnClick}>
+        <span className="flex items-center justify-center size-5">{icon}</span>
+        {!isSidebarCollapsed && <span className="text-sm leading-5 font-medium flex-1 truncate">{title}</span>}
+      </Link>
+    </Tooltip>
   );
 });