From 440fd4e02b2d8c13d8b4827abdfe609755cba990 Mon Sep 17 00:00:00 2001
From: SagarRajput-7 <162284829+SagarRajput-7@users.noreply.github.com>
Date: Wed, 9 Oct 2024 13:33:14 +0530
Subject: [PATCH] feat: added info funct for panels in dashaboard layout for
 showing description (#6133)

* feat: added info funct for panels in dashaboard layout for showing description

* feat: position description info next to title

* feat: replaced error info icon
---
 .../WidgetHeader/WidgetHeader.styles.scss     | 22 +++++++++++++
 .../GridCardLayout/WidgetHeader/index.tsx     | 32 +++++++++++++------
 2 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss b/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss
index 11659e9a3e..1af189fc15 100644
--- a/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss
+++ b/frontend/src/container/GridCardLayout/WidgetHeader/WidgetHeader.styles.scss
@@ -20,6 +20,14 @@
 	}
 }
 
+.widget-header-title-container {
+	display: flex;
+	align-items: center;
+	gap: 8px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 .widget-header-title {
 	max-width: 80%;
 }
@@ -58,3 +66,17 @@
 		}
 	}
 }
+
+.long-tooltip {
+	.ant-tooltip-content {
+		max-height: 500px;
+		overflow: auto;
+	}
+	&.ant-tooltip {
+		max-width: 500px;
+	}
+}
+
+.info-tooltip {
+	cursor: pointer;
+}
diff --git a/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx b/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
index d4aa6a4c09..6d7839aa4f 100644
--- a/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
+++ b/frontend/src/container/GridCardLayout/WidgetHeader/index.tsx
@@ -6,8 +6,8 @@ import {
 	CopyOutlined,
 	DeleteOutlined,
 	EditFilled,
-	ExclamationCircleOutlined,
 	FullscreenOutlined,
+	InfoCircleOutlined,
 	MoreOutlined,
 	SearchOutlined,
 	WarningOutlined,
@@ -21,7 +21,7 @@ import useComponentPermission from 'hooks/useComponentPermission';
 import history from 'lib/history';
 import { RowData } from 'lib/query/createTableColumnsFromQuery';
 import { isEmpty } from 'lodash-es';
-import { X } from 'lucide-react';
+import { CircleX, X } from 'lucide-react';
 import { unparse } from 'papaparse';
 import { ReactNode, useCallback, useMemo, useState } from 'react';
 import { UseQueryResult } from 'react-query';
@@ -234,13 +234,25 @@ function WidgetHeader({
 				/>
 			) : (
 				<>
-					<Typography.Text
-						ellipsis
-						data-testid={title}
-						className="widget-header-title"
-					>
-						{title}
-					</Typography.Text>
+					<div className="widget-header-title-container">
+						<Typography.Text
+							ellipsis
+							data-testid={title}
+							className="widget-header-title"
+						>
+							{title}
+						</Typography.Text>
+						{widget.description && (
+							<Tooltip
+								title={widget.description}
+								overlayClassName="long-tooltip"
+								className="info-tooltip"
+								placement="right"
+							>
+								<InfoCircleOutlined />
+							</Tooltip>
+						)}
+					</div>
 					<div className="widget-header-actions">
 						<div className="widget-api-actions">{threshold}</div>
 						{isFetchingResponse && !queryResponse.isError && (
@@ -252,7 +264,7 @@ function WidgetHeader({
 								placement={errorTooltipPosition}
 								className="widget-api-actions"
 							>
-								<ExclamationCircleOutlined />
+								<CircleX size={20} />
 							</Tooltip>
 						)}