From f22322f4349a91bbb645dfcacf1e799d870a6f16 Mon Sep 17 00:00:00 2001
From: Syed Bariman Jan <syedbarimanjan@gmail.com>
Date: Thu, 14 Mar 2024 18:16:43 +0500
Subject: [PATCH] [GSoC2024] Add tooltip to long project card name (#7550)

---
 ...13_200940_syedbarimnajan_long_cardname_tooltip.md |  4 ++++
 .../cloud-storages-page/cloud-storage-item.tsx       |  2 +-
 .../components/models-page/deployed-model-item.tsx   |  4 ++--
 .../src/components/projects-page/project-item.tsx    |  9 +++++++--
 cvat-ui/src/components/tasks-page/task-item.tsx      | 12 +++++-------
 5 files changed, 19 insertions(+), 12 deletions(-)
 create mode 100644 changelog.d/20240313_200940_syedbarimnajan_long_cardname_tooltip.md

diff --git a/changelog.d/20240313_200940_syedbarimnajan_long_cardname_tooltip.md b/changelog.d/20240313_200940_syedbarimnajan_long_cardname_tooltip.md
new file mode 100644
index 000000000000..9887c6e24a82
--- /dev/null
+++ b/changelog.d/20240313_200940_syedbarimnajan_long_cardname_tooltip.md
@@ -0,0 +1,4 @@
+### Added
+
+- Tooltips for long names on cards (projects, tasks, cloud storages, and models)
+  (<https://github.com/opencv/cvat/pull/7550>)
diff --git a/cvat-ui/src/components/cloud-storages-page/cloud-storage-item.tsx b/cvat-ui/src/components/cloud-storages-page/cloud-storage-item.tsx
index 7664934e5956..c4c7571bec9c 100644
--- a/cvat-ui/src/components/cloud-storages-page/cloud-storage-item.tsx
+++ b/cvat-ui/src/components/cloud-storages-page/cloud-storage-item.tsx
@@ -95,7 +95,7 @@ export default function CloudStorageItemComponent(props: Props): JSX.Element {
         >
             <Meta
                 title={(
-                    <Paragraph>
+                    <Paragraph ellipsis={{ tooltip: displayName }}>
                         <Text strong>{`#${id}: `}</Text>
                         <Text>{displayName}</Text>
                     </Paragraph>
diff --git a/cvat-ui/src/components/models-page/deployed-model-item.tsx b/cvat-ui/src/components/models-page/deployed-model-item.tsx
index b7ef81e9b222..2bd96b4f674f 100644
--- a/cvat-ui/src/components/models-page/deployed-model-item.tsx
+++ b/cvat-ui/src/components/models-page/deployed-model-item.tsx
@@ -166,9 +166,9 @@ export default function DeployedModelItem(props: Props): JSX.Element {
             >
                 <Meta
                     title={(
-                        <span onClick={onOpenModel} className='cvat-models-item-title' aria-hidden>
+                        <Text ellipsis={{ tooltip: model.name }} onClick={onOpenModel} className='cvat-models-item-title' aria-hidden>
                             {model.name}
-                        </span>
+                        </Text>
                     )}
                     description={(
                         <div className='cvat-models-item-description'>
diff --git a/cvat-ui/src/components/projects-page/project-item.tsx b/cvat-ui/src/components/projects-page/project-item.tsx
index 8e263225e7f8..d2d21ed5b4de 100644
--- a/cvat-ui/src/components/projects-page/project-item.tsx
+++ b/cvat-ui/src/components/projects-page/project-item.tsx
@@ -86,9 +86,14 @@ export default function ProjectItemComponent(props: Props): JSX.Element {
             >
                 <Meta
                     title={(
-                        <span onClick={onOpenProject} className='cvat-projects-project-item-title' aria-hidden>
+                        <Text
+                            ellipsis={{ tooltip: instance.name }}
+                            onClick={onOpenProject}
+                            className='cvat-projects-project-item-title'
+                            aria-hidden
+                        >
                             {instance.name}
-                        </span>
+                        </Text>
                     )}
                     description={(
                         <div className='cvat-projects-project-item-description'>
diff --git a/cvat-ui/src/components/tasks-page/task-item.tsx b/cvat-ui/src/components/tasks-page/task-item.tsx
index 247e3ac01976..092fd0de1636 100644
--- a/cvat-ui/src/components/tasks-page/task-item.tsx
+++ b/cvat-ui/src/components/tasks-page/task-item.tsx
@@ -14,7 +14,6 @@ import Dropdown from 'antd/lib/dropdown';
 import Progress from 'antd/lib/progress';
 import Badge from 'antd/lib/badge';
 import moment from 'moment';
-
 import { Task, RQStatus } from 'cvat-core-wrapper';
 import ActionsMenuContainer from 'containers/actions-menu/actions-menu';
 import Preview from 'components/common/preview';
@@ -116,14 +115,13 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
         const updated = moment(taskInstance.updatedDate).fromNow();
         const created = moment(taskInstance.createdDate).format('MMMM Do YYYY');
 
-        // Get and truncate a task name
-        const name = `${taskInstance.name.substring(0, 70)}${taskInstance.name.length > 70 ? '...' : ''}`;
-
         return (
             <Col span={10} className='cvat-task-item-description'>
-                <Text strong type='secondary' className='cvat-item-task-id'>{`#${id}: `}</Text>
-                <Text strong className='cvat-item-task-name'>
-                    {name}
+                <Text ellipsis={{ tooltip: taskInstance.name }}>
+                    <Text strong type='secondary' className='cvat-item-task-id'>{`#${id}: `}</Text>
+                    <Text strong className='cvat-item-task-name'>
+                        {taskInstance.name}
+                    </Text>
                 </Text>
                 <br />
                 {owner && (