From d61d523f77faaeb1651e0f56fb93109df7e89191 Mon Sep 17 00:00:00 2001
From: Matthew Goodwin <49927862+m4ttheweric@users.noreply.github.com>
Date: Thu, 6 Jul 2023 12:05:46 -0500
Subject: [PATCH] console: add missing key to component map in CardedTable

PR-URL: https://github.com/hasura/graphql-engine-mono/pull/9712
GitOrigin-RevId: 531e2cfae8568326be4d5486728181c64fa82e31
---
 .../DataGrid/parts/ReactTableWrapper.tsx           |  2 +-
 .../lib/new-components/CardedTable/CardedTable.tsx | 14 +++++++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/ReactTableWrapper.tsx b/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/ReactTableWrapper.tsx
index eae6518b923..8af02235ce8 100644
--- a/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/ReactTableWrapper.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/features/BrowseRows/components/DataGrid/parts/ReactTableWrapper.tsx
@@ -261,7 +261,7 @@ export const ReactTableWrapper: React.VFC<ReactTableWrapperProps> = ({
 
                 return (
                   <CardedTable.TableBodyCell
-                    key={i}
+                    key={`${row.id}-${i}`}
                     data-testid={`@table-cell-${row.id}-${i}`}
                     style={{ maxWidth: '20ch' }}
                   >
diff --git a/frontend/libs/console/legacy-ce/src/lib/new-components/CardedTable/CardedTable.tsx b/frontend/libs/console/legacy-ce/src/lib/new-components/CardedTable/CardedTable.tsx
index 5e118e0e192..d5045e65862 100644
--- a/frontend/libs/console/legacy-ce/src/lib/new-components/CardedTable/CardedTable.tsx
+++ b/frontend/libs/console/legacy-ce/src/lib/new-components/CardedTable/CardedTable.tsx
@@ -107,12 +107,16 @@ const Body = ({ data, showActionCell = false }: BodyProps) => {
     <TableBody>
       {data.map((row, rowIndex) => {
         return (
-          <TableBodyRow>
-            {row.map((cell, index) => {
-              if (showActionCell && index + 1 === row.length) {
-                return <TableBodyActionCell>{cell}</TableBodyActionCell>;
+          <TableBodyRow key={rowIndex}>
+            {row.map((cell, cellIndex) => {
+              if (showActionCell && cellIndex + 1 === row.length) {
+                return (
+                  <TableBodyActionCell key={cellIndex}>
+                    {cell}
+                  </TableBodyActionCell>
+                );
               }
-              return <TableBodyCell>{cell}</TableBodyCell>;
+              return <TableBodyCell key={cellIndex}>{cell}</TableBodyCell>;
             })}
           </TableBodyRow>
         );