From 68003a23d53a90c3a47cdb56ace072c97d6ada49 Mon Sep 17 00:00:00 2001
From: Rucha Mahabal <ruchamahabal2@gmail.com>
Date: Tue, 6 Feb 2024 15:38:59 +0530
Subject: [PATCH] feat: show doctype description on workspace link hover
 (#24598)

---
 frappe/desk/desktop.py                        |  3 ++
 .../public/js/frappe/widgets/links_widget.js  | 50 +++++++++++++------
 2 files changed, 37 insertions(+), 16 deletions(-)

diff --git a/frappe/desk/desktop.py b/frappe/desk/desktop.py
index 26f69be4d2..c31be72461 100644
--- a/frappe/desk/desktop.py
+++ b/frappe/desk/desktop.py
@@ -193,6 +193,9 @@ class Workspace:
 
 				item["count"] = count
 
+		if item.get("link_type") == "DocType":
+			item["description"] = frappe.get_meta(item.link_to).description
+
 		# Translate label
 		item["label"] = _(item.label) if item.label else _(item.name)
 
diff --git a/frappe/public/js/frappe/widgets/links_widget.js b/frappe/public/js/frappe/widgets/links_widget.js
index 2af4564ffa..b83cf04954 100644
--- a/frappe/public/js/frappe/widgets/links_widget.js
+++ b/frappe/public/js/frappe/widgets/links_widget.js
@@ -60,9 +60,7 @@ export default class LinksWidget extends Widget {
 
 		const get_link_for_item = (item) => {
 			if (is_link_disabled(item)) {
-				return `<span class="link-content ellipsis disabled-link">${
-					item.label ? item.label : item.name
-				}</span>
+				return `<span class="link-content ellipsis disabled-link">${item.link_title}</span>
 					<div class="module-link-popover popover fade top in" role="tooltip" style="display: none;">
 						<div class="arrow"></div>
 						<h3 class="popover-title" style="display: none;"></h3>
@@ -74,14 +72,18 @@ export default class LinksWidget extends Widget {
 			}
 
 			if (item.youtube_id)
-				return `<span class="link-content help-video-link ellipsis" data-youtubeid="${
-					item.youtube_id
-				}">
-						${item.label ? item.label : item.name}</span>`;
+				return `
+					<span class="link-content help-video-link ellipsis" data-youtubeid="${item.youtube_id}">
+						${item.link_title}
+					</span>
+				`;
 
-			return `<span class="link-content ellipsis">${
-				item.label ? item.label : item.name
-			} ${frappe.utils.icon("es-line-arrow-up-right", "xs", "", "", "ml-2")} </span>`;
+			return `
+				<span class="link-content ellipsis">
+					<span class="link-text">${item.link_title}</span>
+					${frappe.utils.icon("es-line-arrow-up-right", "xs", "", "", "ml-2")}
+				</span>
+			`;
 		};
 
 		this.link_list = this.links.map((item) => {
@@ -97,14 +99,30 @@ export default class LinksWidget extends Widget {
 			}
 
 			const route = frappe.utils.generate_route(opts);
+			item.link_title = item.label ? item.label : item.name;
 
-			return $(`<a href="${route}" class="link-item ellipsis ${
-				item.onboard ? "onboard-spotlight" : ""
-			} ${disabled_dependent(item)}" type="${item.type}" title="${
-				item.label ? item.label : item.name
-			}">
+			const $link = $(`
+				<a href="${route}" class="link-item ellipsis
+					${item.onboard ? "onboard-spotlight" : ""} ${disabled_dependent(item)}"
+					type="${item.type}" title="${item.link_title}"
+				>
 					${get_link_for_item(item)}
-			</a>`);
+				</a>
+			`);
+
+			if (item.description) {
+				$link.find(".link-text").popover({
+					trigger: "hover",
+					placement: "top",
+					title: item.link_title,
+					content: () =>
+						`<div class="link-description small">${__(item.description)}</div>`,
+					html: true,
+					delay: { show: 600, hide: 100 },
+				});
+			}
+
+			return $link;
 		});
 		if (this.in_customize_mode) {
 			this.body.empty();