From b3d55ae4d5cae9ad09a9c03f1962ba98130e91b2 Mon Sep 17 00:00:00 2001
From: Shekar Siri <sshekarsiri@gmail.com>
Date: Tue, 9 Jul 2024 19:50:57 +0200
Subject: [PATCH] fix(ui): cards library disbale inside card clicks

---
 .../DashboardList/NewDashModal/CardsLibrary.tsx        | 10 ++++++----
 frontend/app/mstore/types/IconProvider.tsx             |  2 +-
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx
index f8da8fa70..5636c867f 100644
--- a/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx
+++ b/frontend/app/components/Dashboard/components/DashboardList/NewDashModal/CardsLibrary.tsx
@@ -40,7 +40,9 @@ function CardsLibrary(props: Props) {
         metricStore.fetchList();
     }, []);
 
-    const onItemClick = (metricId: number) => {
+    const onItemClick = (e: any, metricId: number) => {
+        e.stopPropagation();
+        e.preventDefault();
         props.onCard(metricId);
     }
 
@@ -49,10 +51,10 @@ function CardsLibrary(props: Props) {
             <div className="grid grid-cols-4 gap-4 items-start">
                 {cards.map((metric: any) => (
                     <React.Fragment key={metric.metricId}>
-                        <div className={'col-span-' + metric.config.col}
-                             onClick={() => onItemClick(metric.metricId)}>
+                        <div className={'relative col-span-' + metric.config.col}>
+                            <div className="absolute inset-0 z-10 cursor-pointer" onClick={(e) => onItemClick(e, metric.metricId)} />
                             <LazyLoad>
-                                <Card className='border border-transparent hover:border-indigo-50 hover:shadow-sm  rounded-lg'
+                                <Card className='border border-transparent hover:border-indigo-50 hover:shadow-sm rounded-lg'
                                       style={{
                                           border: selectedList.includes(metric.metricId) ? '1px solid #1890ff' : '1px solid #f0f0f0',
                                       }}
diff --git a/frontend/app/mstore/types/IconProvider.tsx b/frontend/app/mstore/types/IconProvider.tsx
index 1939d97cf..c9807bde6 100644
--- a/frontend/app/mstore/types/IconProvider.tsx
+++ b/frontend/app/mstore/types/IconProvider.tsx
@@ -75,7 +75,7 @@ class UrlIconProvider implements IconProvider {
 
 class DeviceIconProvider implements IconProvider {
   getIcon(obj: any): React.ReactNode {
-    const s = obj.name.toLowerCase();
+    const s = obj.name?.toLowerCase() || '';
     let icon = 'color/device/desktop';
     if (s.includes('desktop')) {
       icon = 'color/device/desktop';