From ec2c3da31ae82fe5b9ff75458f2fb012a22c7693 Mon Sep 17 00:00:00 2001
From: Alessio Biancalana <alessio.biancalana@suse.com>
Date: Fri, 1 Sep 2023 16:09:43 +0200
Subject: [PATCH 1/2] Add rowKey function to Table

---
 assets/js/components/Table/Table.jsx        | 30 ++++++++++++---------
 assets/js/components/Table/defaultRowKey.js |  3 +++
 2 files changed, 21 insertions(+), 12 deletions(-)
 create mode 100644 assets/js/components/Table/defaultRowKey.js

diff --git a/assets/js/components/Table/Table.jsx b/assets/js/components/Table/Table.jsx
index 6b32e3e41b..f3b658a09f 100644
--- a/assets/js/components/Table/Table.jsx
+++ b/assets/js/components/Table/Table.jsx
@@ -12,6 +12,7 @@ import {
 import CollapsibleTableRow from './CollapsibleTableRow';
 import Pagination from './Pagination';
 import EmptyState from './EmptyState';
+import { defaultRowKey } from './defaultRowKey';
 
 const defaultCellRender = (content) => (
   <p className="text-gray-900 whitespace-no-wrap">{content}</p>
@@ -61,6 +62,7 @@ function Table({
   setSearchParams,
   emptyStateText = 'No data available',
   withPadding = true,
+  rowKey = defaultRowKey,
 }) {
   const {
     columns,
@@ -181,18 +183,22 @@ function Table({
                     emptyStateText={emptyStateText}
                   />
                 ) : (
-                  renderedData.map((item, index) => (
-                    <CollapsibleTableRow
-                      item={item}
-                      key={index}
-                      collapsibleDetailRenderer={collapsibleDetailRenderer}
-                      renderCells={renderCells}
-                      columns={columns}
-                      colSpan={columns.length}
-                      className={rowClassName}
-                      collapsedRowClassName={collapsedRowClassName}
-                    />
-                  ))
+                  renderedData.map((item, index) => {
+                    const key = rowKey(item, index);
+
+                    return (
+                      <CollapsibleTableRow
+                        item={item}
+                        key={key}
+                        collapsibleDetailRenderer={collapsibleDetailRenderer}
+                        renderCells={renderCells}
+                        columns={columns}
+                        colSpan={columns.length}
+                        className={rowClassName}
+                        collapsedRowClassName={collapsedRowClassName}
+                      />
+                    );
+                  })
                 )}
               </tbody>
             </table>
diff --git a/assets/js/components/Table/defaultRowKey.js b/assets/js/components/Table/defaultRowKey.js
new file mode 100644
index 0000000000..dd7fd349c9
--- /dev/null
+++ b/assets/js/components/Table/defaultRowKey.js
@@ -0,0 +1,3 @@
+import { get } from 'lodash';
+
+export const defaultRowKey = (item, index) => get(item, 'key', index);

From 8516b59a0ddd761e2f858dfa24cad01b09fb2063 Mon Sep 17 00:00:00 2001
From: Alessio Biancalana <alessio.biancalana@suse.com>
Date: Fri, 1 Sep 2023 16:10:05 +0200
Subject: [PATCH 2/2] Add tests

---
 assets/js/components/Table/Table.test.jsx | 28 ++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/assets/js/components/Table/Table.test.jsx b/assets/js/components/Table/Table.test.jsx
index 34348ae0f3..cf32db6955 100644
--- a/assets/js/components/Table/Table.test.jsx
+++ b/assets/js/components/Table/Table.test.jsx
@@ -138,7 +138,7 @@ describe('Table component', () => {
       });
     });
 
-    test('should return empty state message when data is empty', () => {
+    it('should return empty state message when data is empty', () => {
       const data = [];
       const emptyStateText = faker.random.words(5);
       render(
@@ -157,4 +157,30 @@ describe('Table component', () => {
       expect(tableCell).toHaveTextContent(emptyStateText);
     });
   });
+
+  describe('rowKey function', () => {
+    it('is used to determine keys for rows', async () => {
+      const rowKey = jest.fn((_item, index) => index);
+      const data = tableDataFactory.buildList(5);
+
+      render(
+        <Table
+          config={tableConfig}
+          data={data}
+          setSearchParams={() => {}}
+          rowKey={rowKey}
+        />
+      );
+
+      await waitFor(() => {
+        const table = screen.getByRole('table');
+        expect(table.querySelectorAll('tbody > tr')).toHaveLength(5);
+      });
+
+      expect(rowKey).toHaveBeenCalledTimes(5);
+      expect(rowKey).toHaveBeenCalledWith(data[0], 0);
+      expect(rowKey).toHaveBeenCalledWith(data[1], 1);
+      expect(rowKey).toHaveBeenCalledWith(data[2], 2);
+    });
+  });
 });