From e24883a38af4ed80333613cdaf7517f3cc20ef46 Mon Sep 17 00:00:00 2001
From: Nikhil Shahi <nshahi1998@gmail.com>
Date: Tue, 9 Aug 2022 20:04:20 -0500
Subject: [PATCH] make row columns clickable

---
 frontend/src/components/AlertList/List.tsx     | 11 ++++++-----
 frontend/src/components/Endpoint/AlertList.tsx | 11 ++++++-----
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/frontend/src/components/AlertList/List.tsx b/frontend/src/components/AlertList/List.tsx
index 4b933690..6a71b984 100644
--- a/frontend/src/components/AlertList/List.tsx
+++ b/frontend/src/components/AlertList/List.tsx
@@ -125,6 +125,7 @@ const List: React.FC<AlertTablesProps> = React.memo(
         selector: (row: Alert) => row.riskScore || "",
         cell: (row: Alert) => (
           <Badge
+            data-tag="allowRowEvents"
             p="1"
             fontSize="sm"
             colorScheme={RISK_TO_COLOR[row.riskScore]}
@@ -141,7 +142,7 @@ const List: React.FC<AlertTablesProps> = React.memo(
         sortable: true,
         selector: (row: Alert) => `${row.apiEndpoint.method}_${row.apiEndpoint.path}`,
         cell: (row: Alert) => (
-          <HStack>
+          <HStack data-tag="allowRowEvents">
             <Badge
               fontSize="sm"
               px="2"
@@ -163,7 +164,7 @@ const List: React.FC<AlertTablesProps> = React.memo(
         sortable: true,
         selector: (row: Alert) => row.type || "",
         cell: (row: Alert) => (
-          <Text fontSize="sm" fontWeight="semibold">
+          <Text data-tag="allowRowEvents" fontSize="sm" fontWeight="semibold">
             {row.type}
           </Text>
         ),
@@ -175,7 +176,7 @@ const List: React.FC<AlertTablesProps> = React.memo(
         sortable: true,
         selector: (row: Alert) => row.description || "",
         cell: (row: Alert) => (
-          <Text fontSize="sm" fontWeight="semibold">
+          <Text data-tag="allowRowEvents" fontSize="sm" fontWeight="semibold">
             {row.description}
           </Text>
         ),
@@ -187,7 +188,7 @@ const List: React.FC<AlertTablesProps> = React.memo(
         sortable: true,
         selector: (row: Alert) => row.createdAt.toISOString(),
         cell: (row: Alert) => (
-          <Text fontSize="sm" fontWeight="semibold">
+          <Text data-tag="allowRowEvents" fontSize="sm" fontWeight="semibold">
             {getDateTimeString(row.createdAt)}
           </Text>
         ),
@@ -199,7 +200,7 @@ const List: React.FC<AlertTablesProps> = React.memo(
         sortable: true,
         selector: (row: Alert) => row.resolved,
         cell: (row: Alert) => (
-          <Box alignItems={"end"}>
+          <Box data-tag="allowRowEvents" alignItems={"end"}>
             {row.resolved ? <ImCheckmark color="#93DCAC" /> : <ImCross color="#FDB2B2" />}
           </Box>
         ),
diff --git a/frontend/src/components/Endpoint/AlertList.tsx b/frontend/src/components/Endpoint/AlertList.tsx
index 209795ad..0fa1e2ae 100644
--- a/frontend/src/components/Endpoint/AlertList.tsx
+++ b/frontend/src/components/Endpoint/AlertList.tsx
@@ -49,6 +49,7 @@ const AlertList: React.FC<AlertListProps> = React.memo(
         selector: (row: Alert) => row.riskScore || "",
         cell: (row: Alert) => (
           <Badge
+            data-tag="allowRowEvents"
             p="1"
             fontSize="sm"
             colorScheme={RISK_TO_COLOR[row.riskScore]}
@@ -67,7 +68,7 @@ const AlertList: React.FC<AlertListProps> = React.memo(
         sortable: true,
         selector: (row: Alert) => `${row.apiEndpoint.method}_${row.apiEndpoint.path}`,
         cell: (row: Alert) => (
-          <HStack>
+          <HStack data-tag="allowRowEvents">
             <Badge
               fontSize="sm"
               px="2"
@@ -91,7 +92,7 @@ const AlertList: React.FC<AlertListProps> = React.memo(
         sortable: true,
         selector: (row: Alert) => row.type || "",
         cell: (row: Alert) => (
-          <Text fontSize="sm" fontWeight="semibold">
+          <Text data-tag="allowRowEvents" fontSize="sm" fontWeight="semibold">
             {row.type}
           </Text>
         ),
@@ -103,7 +104,7 @@ const AlertList: React.FC<AlertListProps> = React.memo(
         sortable: true,
         selector: (row: Alert) => row.description || "",
         cell: (row: Alert) => (
-          <Text fontSize="sm" fontWeight="semibold">
+          <Text data-tag="allowRowEvents" fontSize="sm" fontWeight="semibold">
             {row.description}
           </Text>
         ),
@@ -115,7 +116,7 @@ const AlertList: React.FC<AlertListProps> = React.memo(
         sortable: true,
         selector: (row: Alert) => row.createdAt.toISOString(),
         cell: (row: Alert) => (
-          <Text fontSize="sm" fontWeight="semibold">
+          <Text data-tag="allowRowEvents" fontSize="sm" fontWeight="semibold">
             {getDateTimeString(row.createdAt)}
           </Text>
         ),
@@ -129,7 +130,7 @@ const AlertList: React.FC<AlertListProps> = React.memo(
           sortable: true,
           selector: (row: Alert) => row.resolved,
           cell: (row: Alert) => (
-            <Box alignItems={"end"}>
+            <Box data-tag="allowRowEvents" alignItems={"end"}>
               {row.resolved ? <ImCheckmark color="#93DCAC" /> : <ImCross color="#FDB2B2" />}
             </Box>
           ),