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 e679896fa64453153f43157bcc37bb2ad527fc77..1b8cb81ed0ad05ba2a18348993c6149b81440a8e 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/FileRow/index.jsx
@@ -1,26 +1,13 @@
-import { useState } from "react";
+import React from "react";
import {
formatDate,
getFileExtension,
middleTruncate,
} from "@/utils/directories";
import { File } from "@phosphor-icons/react";
-import debounce from "lodash.debounce";
+import { Tooltip } from "react-tooltip";
export default function FileRow({ item, selected, toggleSelection }) {
- const [showTooltip, setShowTooltip] = useState(false);
-
- const handleShowTooltip = () => {
- setShowTooltip(true);
- };
-
- const handleHideTooltip = () => {
- setShowTooltip(false);
- };
-
- const handleMouseEnter = debounce(handleShowTooltip, 500);
- const handleMouseLeave = debounce(handleHideTooltip, 500);
-
return (
<tr
onClick={() => toggleSelection(item)}
@@ -28,7 +15,10 @@ export default function FileRow({ item, selected, toggleSelection }) {
selected ? "selected" : ""
}`}
>
- <div className="pl-2 col-span-6 flex gap-x-[4px] items-center">
+ <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"
@@ -41,34 +31,35 @@ 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}
- </div>
- )}
- </div>
+ <p className="whitespace-nowrap overflow-hidden text-ellipsis">
+ {middleTruncate(item.title, 60)}
+ </p>
</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>
</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>
);
}
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/Directory/index.jsx
index 10d3ca87b82a2dfe4041cf245e201d176ddad361..c8d942d043cb2f53bb8606c668ac8806efbff9f5 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 f473254273f59c108d5a8a74ded2e33c3e83afdc..727331adbf0fb442f1bf84c4012c0a754eeb755a 100644
--- a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
+++ b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/WorkspaceFileRow/index.jsx
@@ -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,
@@ -20,8 +19,6 @@ export default function WorkspaceFileRow({
hasChanges,
movedItems,
}) {
- const [showTooltip, setShowTooltip] = useState(false);
-
const onRemoveClick = async () => {
setLoading(true);
@@ -40,62 +37,57 @@ export default function WorkspaceFileRow({
setLoading(false);
};
- const handleShowTooltip = () => {
- setShowTooltip(true);
- };
-
- const handleHideTooltip = () => {
- 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"
+ }`}
>
- <div className="col-span-5 flex gap-x-[4px] items-center">
+ <div
+ data-tooltip-id={`directory-item-${item.url}`}
+ className="col-span-10 w-fit 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}
- </div>
- )}
- </div>
+ <p className="whitespace-nowrap overflow-hidden text-ellipsis">
+ {middleTruncate(item.title, 60)}
+ </p>
</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} />
</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>
);
}
diff --git a/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx b/frontend/src/components/Modals/ManageWorkspace/Documents/WorkspaceDirectory/index.jsx
index 5617a02042783e571843596c3a0b8c5f68480689..fa32bf9fc9e3ffeab60ae82c12e3a8cef5b54eb4 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">