From 3bae164cfd944557d6951ef466cafc310fb51cce Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Mon, 13 Feb 2023 16:24:47 +0100
Subject: [PATCH] fix(ui) - insight item name

---
 .../Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx   | 2 +-
 .../Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx
index 3705ceaa7..a8ac5b54d 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightItem.tsx
@@ -100,7 +100,7 @@ function RageItem({ item, className, onClick }: any) {
       <Icon name={item.icon} size={18} className="mr-2" color={item.iconColor} />
       <div className="mx-1 bg-gray-100 px-2 rounded">{item.isNew ? item.name : 'Click Rage'}</div>
       {item.isNew && <div className="mx-1">has</div>}
-      {!item.isNew && <div className="mx-1">on</div>}
+      {!item.isNew && <div className="mx-1">on <span className="mx-1 bg-gray-100 px-2 rounded">{item.name}</span></div>}
       {item.isNew && <div className="font-medium text-red">{item.ratio}%</div>}
       {item.isNew && <div className="mx-1">more clickrage than other raged elements.</div>}
       {!item.isNew && (
diff --git a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
index e3028ee96..a12449437 100644
--- a/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
+++ b/frontend/app/components/Dashboard/Widgets/CustomMetricsWidgets/InsightsCard/InsightsCard.tsx
@@ -69,7 +69,7 @@ function InsightsCard({ data }: any) {
       <div className="overflow-y-auto" style={{ maxHeight: '240px' }}>
         {data.issues &&
           data.issues.map((item: any) => (
-            <InsightItem item={item} onClick={(e) => clickHanddler(e, item)} />
+            <InsightItem key={item.name} item={item} onClick={(e) => clickHanddler(e, item)} />
           ))}
       </div>
     </NoContent>