From 80a7b9d16dd4da05731a22d18ba638afb41d21b2 Mon Sep 17 00:00:00 2001
From: rahulkeswani101 <rahul@signoz.io>
Date: Tue, 6 Aug 2024 13:33:51 +0530
Subject: [PATCH] feat: added link for dashboard name (#5544)

* feat: added link for dashboard name

* refactor: added getLink function to get the link of dashboard details page

* refactor: changed the color for dashboard name

* refactor: updated the classname for dashboard name

* fix: update css tokens and light mode design

---------

Co-authored-by: vikrantgupta25 <vikrant.thomso@gmail.com>
---
 .../container/ListOfDashboard/DashboardList.styles.scss   | 8 ++++++++
 frontend/src/container/ListOfDashboard/DashboardsList.tsx | 6 ++++--
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
index 11dac46fde..221d59dcf4 100644
--- a/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
+++ b/frontend/src/container/ListOfDashboard/DashboardList.styles.scss
@@ -43,6 +43,10 @@
 				background: var(--bg-ink-400);
 				cursor: pointer;
 
+				.dashboard-title {
+					color: var(--bg-vanilla-100);
+				}
+
 				.title-with-action {
 					display: flex;
 					justify-content: space-between;
@@ -1048,6 +1052,10 @@
 					border: 1px solid var(--bg-vanilla-200);
 					background: var(--bg-vanilla-100);
 
+					.dashboard-title {
+						color: var(--bg-slate-300);
+					}
+
 					.title-with-action {
 						.dashboard-title {
 							.ant-typography {
diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
index 17b6fe0863..d9994b3776 100644
--- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx
+++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx
@@ -66,7 +66,7 @@ import {
 } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
-import { generatePath } from 'react-router-dom';
+import { generatePath, Link } from 'react-router-dom';
 import { useCopyToClipboard } from 'react-use';
 import { AppState } from 'store/reducers';
 import { Dashboard } from 'types/api/dashboard/getAll';
@@ -455,7 +455,9 @@ function DashboardsList(): JSX.Element {
 									alt="dashboard-image"
 								/>
 								<Typography.Text data-testid={`dashboard-title-${index}`}>
-									{dashboard.name}
+									<Link to={getLink()} className="dashboard-title">
+										{dashboard.name}
+									</Link>
 								</Typography.Text>
 							</div>