From 1521a0ea2f3df9d4c26987689cc88c690f152c56 Mon Sep 17 00:00:00 2001
From: shatfield4 <seanhatfield5@gmail.com>
Date: Mon, 17 Jun 2024 12:44:43 -0700
Subject: [PATCH 1/2] rework document picker ui

---
 .../Documents/Directory/FileRow/index.jsx     | 60 ++++++++--------
 .../Documents/Directory/index.jsx             |  2 -
 .../WorkspaceFileRow/index.jsx                | 68 ++++++++++---------
 .../Documents/WorkspaceDirectory/index.jsx    |  4 --
 4 files changed, 64 insertions(+), 70 deletions(-)

diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
index e679896fa64..b21228b06cf 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
@@ -1,34 +1,36 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import {
   formatDate,
   getFileExtension,
   middleTruncate,
 } from "@/utils/directories";
 import { File } from "@phosphor-icons/react";
-import debounce from "lodash.debounce";
 
 export default function FileRow({ item, selected, toggleSelection }) {
   const [showTooltip, setShowTooltip] = useState(false);
+  const timeoutRef = useRef(null);
 
-  const handleShowTooltip = () => {
-    setShowTooltip(true);
+  const handleMouseEnter = () => {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setShowTooltip(true);
+    }, 800);
   };
 
-  const handleHideTooltip = () => {
+  const handleMouseLeave = () => {
+    clearTimeout(timeoutRef.current);
     setShowTooltip(false);
   };
-
-  const handleMouseEnter = debounce(handleShowTooltip, 500);
-  const handleMouseLeave = debounce(handleHideTooltip, 500);
-
   return (
     <tr
       onClick={() => toggleSelection(item)}
       className={`text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer file-row ${
         selected ? "selected" : ""
       }`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
-      <div className="pl-2 col-span-6 flex gap-x-[4px] items-center">
+      <div className="col-span-10 flex gap-x-[4px] items-center relative">
         <div
           className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
           role="checkbox"
@@ -41,28 +43,24 @@ export default function FileRow({ item, selected, toggleSelection }) {
           className="shrink-0 text-base font-bold w-4 h-4 mr-[3px]"
           weight="fill"
         />
-        <div
-          className="relative"
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          <p className="whitespace-nowrap overflow-hidden max-w-[165px] text-ellipsis">
-            {middleTruncate(item.title, 17)}
-          </p>
-          {showTooltip && (
-            <div className="absolute left-0 bg-white text-black p-1.5 rounded shadow-lg whitespace-nowrap">
-              {item.title}
+        <p className="whitespace-nowrap overflow-hidden text-ellipsis">
+          {middleTruncate(item.title, 60)}
+        </p>
+        {showTooltip && (
+          <div className="absolute left-0 top-full mt-2 p-2 bg-white text-black rounded shadow-lg z-10 max-w-[560px]">
+            <p className="font-bold">{item.title}</p>
+            <div className="flex mt-1 gap-x-2">
+              <p className="text-xs">
+                Date: <b>{formatDate(item?.published)}</b>
+              </p>
+              <p className="text-xs uppercase">
+                Type: <b>{getFileExtension(item.url)}</b>
+              </p>
             </div>
-          )}
-        </div>
+          </div>
+        )}
       </div>
-      <p className="col-span-3 pl-3.5 whitespace-nowrap">
-        {formatDate(item?.published)}
-      </p>
-      <p className="col-span-2 pl-2 uppercase overflow-x-hidden">
-        {getFileExtension(item.url)}
-      </p>
-      <div className="-col-span-2 flex justify-end items-center">
+      <div className="col-span-2 flex justify-end items-center">
         {item?.cached && (
           <div className="bg-white/10 rounded-3xl">
             <p className="text-xs px-2 py-0.5">Cached</p>
@@ -71,4 +69,4 @@ export default function FileRow({ item, selected, toggleSelection }) {
       </div>
     </tr>
   );
-}
+}
\ No newline at end of file
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
index 10d3ca87b82..c8d942d043c 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
@@ -203,8 +203,6 @@ function Directory({
         <div className="relative w-[560px] h-[310px] bg-zinc-900 rounded-2xl overflow-hidden">
           <div className="absolute top-0 left-0 right-0 z-10 rounded-t-2xl text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 shadow-lg bg-zinc-900">
             <p className="col-span-6">Name</p>
-            <p className="col-span-3">Date</p>
-            <p className="col-span-2">Kind</p>
           </div>
 
           <div className="overflow-y-auto h-full pt-8">
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
index f473254273f..d12c6eccc8b 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -1,4 +1,4 @@
-import { memo, useState } from "react";
+import { memo, useState, useRef } from "react";
 import {
   formatDate,
   getFileExtension,
@@ -6,9 +6,8 @@ import {
 } from "@/utils/directories";
 import { ArrowUUpLeft, File, PushPin } from "@phosphor-icons/react";
 import Workspace from "@/models/workspace";
-import debounce from "lodash.debounce";
-import { Tooltip } from "react-tooltip";
 import showToast from "@/utils/toast";
+import { Tooltip } from "react-tooltip";
 
 export default function WorkspaceFileRow({
   item,
@@ -21,6 +20,7 @@ export default function WorkspaceFileRow({
   movedItems,
 }) {
   const [showTooltip, setShowTooltip] = useState(false);
+  const timeoutRef = useRef(null);
 
   const onRemoveClick = async () => {
     setLoading(true);
@@ -40,56 +40,58 @@ export default function WorkspaceFileRow({
     setLoading(false);
   };
 
-  const handleShowTooltip = () => {
-    setShowTooltip(true);
+  const handleMouseEnter = () => {
+    clearTimeout(timeoutRef.current);
+    timeoutRef.current = setTimeout(() => {
+      setShowTooltip(true);
+    }, 500);
   };
 
-  const handleHideTooltip = () => {
+  const handleMouseLeave = () => {
+    clearTimeout(timeoutRef.current);
     setShowTooltip(false);
   };
 
   const isMovedItem = movedItems?.some((movedItem) => movedItem.id === item.id);
-  const handleMouseEnter = debounce(handleShowTooltip, 500);
-  const handleMouseLeave = debounce(handleHideTooltip, 500);
+
   return (
     <div
-      className={`items-center text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer
-          ${isMovedItem ? "bg-green-800/40" : "file-row"}`}
+      className={`items-center text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer ${
+        isMovedItem ? "bg-green-800/40" : "file-row"
+      }`}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
     >
-      <div className="col-span-5 flex gap-x-[4px] items-center">
+      <div className="col-span-10 flex gap-x-[4px] items-center relative">
         <File
-          className="text-base font-bold w-4 h-4 ml-3 mr-[3px]"
+          className="shrink-0 text-base font-bold w-4 h-4 mr-[3px] ml-3"
           weight="fill"
         />
-        <div
-          className="relative"
-          onMouseEnter={handleMouseEnter}
-          onMouseLeave={handleMouseLeave}
-        >
-          <p className="whitespace-nowrap overflow-hidden max-w-[165px] text-ellipsis">
-            {middleTruncate(item.title, 17)}
-          </p>
-          {showTooltip && (
-            <div className="absolute left-0 bg-white text-black p-1.5 rounded shadow-lg whitespace-nowrap">
-              {item.title}
+        <p className="whitespace-nowrap overflow-hidden text-ellipsis">
+          {middleTruncate(item.title, 60)}
+        </p>
+        {showTooltip && (
+          <div className="absolute left-0 top-full mt-2 p-2 bg-white text-black rounded shadow-lg z-10">
+            <p className="font-bold">{item.title}</p>
+            <div className="flex mt-1 gap-x-2">
+              <p className="text-xs">
+                Date: <b>{formatDate(item?.published)}</b>
+              </p>
+              <p className="text-xs uppercase">
+                Type: <b>{getFileExtension(item.url)}</b>
+              </p>
             </div>
-          )}
-        </div>
+          </div>
+        )}
       </div>
-      <p className="col-span-3 pl-3.5 whitespace-nowrap">
-        {formatDate(item?.published)}
-      </p>
-      <p className="col-span-2 pl-2 uppercase overflow-x-hidden">
-        {getFileExtension(item.url)}
-      </p>
-      <div className="col-span-2 flex justify-center items-center">
+      <div className="col-span-2 flex justify-end items-center">
         {hasChanges ? (
           <div className="w-4 h-4 ml-2 flex-shrink-0" />
         ) : (
           <div className="flex gap-x-2 items-center">
             <PinItemToWorkspace
               workspace={workspace}
-              docPath={`${folderName}/${item.name}`} // how to find documents during pin/unpin
+              docPath={`${folderName}/${item.name}`}
               item={item}
             />
             <RemoveItemFromWorkspace item={item} onClick={onRemoveClick} />
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
index 5617a020427..fa32bf9fc9e 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
@@ -31,8 +31,6 @@ function WorkspaceDirectory({
         <div className="relative w-[560px] h-[445px] bg-zinc-900 rounded-2xl mt-5">
           <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8">
             <p className="col-span-5">Name</p>
-            <p className="col-span-3">Date</p>
-            <p className="col-span-2">Kind</p>
             <p className="col-span-2" />
           </div>
           <div className="w-full h-full flex items-center justify-center flex-col gap-y-5">
@@ -61,8 +59,6 @@ function WorkspaceDirectory({
         >
           <div className="text-white/80 text-xs grid grid-cols-12 py-2 px-8 border-b border-white/20 bg-zinc-900 sticky top-0 z-10">
             <p className="col-span-5">Name</p>
-            <p className="col-span-3">Date</p>
-            <p className="col-span-2">Kind</p>
             <p className="col-span-2" />
           </div>
           <div className="w-full h-full flex flex-col z-0">

From b95c12686835f3d988b323ae922a925febbcfb18 Mon Sep 17 00:00:00 2001
From: timothycarambat <rambat1010@gmail.com>
Date: Mon, 17 Jun 2024 14:23:29 -0700
Subject: [PATCH 2/2] refactor tooltips to use react-tooltip lib with custom
 elements

---
 .../Documents/Directory/FileRow/index.jsx     | 57 ++++++++-----------
 .../WorkspaceFileRow/index.jsx                | 56 ++++++++----------
 2 files changed, 48 insertions(+), 65 deletions(-)

diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
index b21228b06cf..1b8cb81ed0a 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
@@ -1,36 +1,24 @@
-import { useRef, useState } from "react";
+import React from "react";
 import {
   formatDate,
   getFileExtension,
   middleTruncate,
 } from "@/utils/directories";
 import { File } from "@phosphor-icons/react";
+import { Tooltip } from "react-tooltip";
 
 export default function FileRow({ item, selected, toggleSelection }) {
-  const [showTooltip, setShowTooltip] = useState(false);
-  const timeoutRef = useRef(null);
-
-  const handleMouseEnter = () => {
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setShowTooltip(true);
-    }, 800);
-  };
-
-  const handleMouseLeave = () => {
-    clearTimeout(timeoutRef.current);
-    setShowTooltip(false);
-  };
   return (
     <tr
       onClick={() => toggleSelection(item)}
       className={`text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer file-row ${
         selected ? "selected" : ""
       }`}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
     >
-      <div className="col-span-10 flex gap-x-[4px] items-center relative">
+      <div
+        data-tooltip-id={`directory-item-${item.url}`}
+        className="col-span-10 w-fit flex gap-x-[4px] items-center relative"
+      >
         <div
           className="shrink-0 w-3 h-3 rounded border-[1px] border-white flex justify-center items-center cursor-pointer"
           role="checkbox"
@@ -46,19 +34,6 @@ export default function FileRow({ item, selected, toggleSelection }) {
         <p className="whitespace-nowrap overflow-hidden text-ellipsis">
           {middleTruncate(item.title, 60)}
         </p>
-        {showTooltip && (
-          <div className="absolute left-0 top-full mt-2 p-2 bg-white text-black rounded shadow-lg z-10 max-w-[560px]">
-            <p className="font-bold">{item.title}</p>
-            <div className="flex mt-1 gap-x-2">
-              <p className="text-xs">
-                Date: <b>{formatDate(item?.published)}</b>
-              </p>
-              <p className="text-xs uppercase">
-                Type: <b>{getFileExtension(item.url)}</b>
-              </p>
-            </div>
-          </div>
-        )}
       </div>
       <div className="col-span-2 flex justify-end items-center">
         {item?.cached && (
@@ -67,6 +42,24 @@ export default function FileRow({ item, selected, toggleSelection }) {
           </div>
         )}
       </div>
+      <Tooltip
+        id={`directory-item-${item.url}`}
+        place="bottom"
+        delayShow={800}
+        className="tooltip invert z-99"
+      >
+        <div className="text-xs ">
+          <p className="text-white">{item.title}</p>
+          <div className="flex mt-1 gap-x-2">
+            <p className="">
+              Date: <b>{formatDate(item?.published)}</b>
+            </p>
+            <p className="">
+              Type: <b>{getFileExtension(item.url).toUpperCase()}</b>
+            </p>
+          </div>
+        </div>
+      </Tooltip>
     </tr>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
index d12c6eccc8b..727331adbf0 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -1,4 +1,4 @@
-import { memo, useState, useRef } from "react";
+import { memo, useState } from "react";
 import {
   formatDate,
   getFileExtension,
@@ -19,9 +19,6 @@ export default function WorkspaceFileRow({
   hasChanges,
   movedItems,
 }) {
-  const [showTooltip, setShowTooltip] = useState(false);
-  const timeoutRef = useRef(null);
-
   const onRemoveClick = async () => {
     setLoading(true);
 
@@ -40,29 +37,17 @@ export default function WorkspaceFileRow({
     setLoading(false);
   };
 
-  const handleMouseEnter = () => {
-    clearTimeout(timeoutRef.current);
-    timeoutRef.current = setTimeout(() => {
-      setShowTooltip(true);
-    }, 500);
-  };
-
-  const handleMouseLeave = () => {
-    clearTimeout(timeoutRef.current);
-    setShowTooltip(false);
-  };
-
   const isMovedItem = movedItems?.some((movedItem) => movedItem.id === item.id);
-
   return (
     <div
       className={`items-center text-white/80 text-xs grid grid-cols-12 py-2 pl-3.5 pr-8 hover:bg-sky-500/20 cursor-pointer ${
         isMovedItem ? "bg-green-800/40" : "file-row"
       }`}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
     >
-      <div className="col-span-10 flex gap-x-[4px] items-center relative">
+      <div
+        data-tooltip-id={`directory-item-${item.url}`}
+        className="col-span-10 w-fit flex gap-x-[4px] items-center relative"
+      >
         <File
           className="shrink-0 text-base font-bold w-4 h-4 mr-[3px] ml-3"
           weight="fill"
@@ -70,19 +55,6 @@ export default function WorkspaceFileRow({
         <p className="whitespace-nowrap overflow-hidden text-ellipsis">
           {middleTruncate(item.title, 60)}
         </p>
-        {showTooltip && (
-          <div className="absolute left-0 top-full mt-2 p-2 bg-white text-black rounded shadow-lg z-10">
-            <p className="font-bold">{item.title}</p>
-            <div className="flex mt-1 gap-x-2">
-              <p className="text-xs">
-                Date: <b>{formatDate(item?.published)}</b>
-              </p>
-              <p className="text-xs uppercase">
-                Type: <b>{getFileExtension(item.url)}</b>
-              </p>
-            </div>
-          </div>
-        )}
       </div>
       <div className="col-span-2 flex justify-end items-center">
         {hasChanges ? (
@@ -98,6 +70,24 @@ export default function WorkspaceFileRow({
           </div>
         )}
       </div>
+      <Tooltip
+        id={`directory-item-${item.url}`}
+        place="bottom"
+        delayShow={800}
+        className="tooltip invert z-99"
+      >
+        <div className="text-xs ">
+          <p className="text-white">{item.title}</p>
+          <div className="flex mt-1 gap-x-2">
+            <p className="">
+              Date: <b>{formatDate(item?.published)}</b>
+            </p>
+            <p className="">
+              Type: <b>{getFileExtension(item.url).toUpperCase()}</b>
+            </p>
+          </div>
+        </div>
+      </Tooltip>
     </div>
   );
 }