From b585ead6dfd4b91ac3c6ce317c79da5364349a39 Mon Sep 17 00:00:00 2001
From: Tymoteusz Czech <2625371+Tymek@users.noreply.github.com>
Date: Tue, 30 Jul 2024 13:09:12 +0200
Subject: [PATCH] fix: avoid react key warnings in tables (#7694)

Refactoring to get rid of `A props object containing a "key" prop is being spread into JSX` warning
---
 .../SortableTableHeader.tsx                   | 76 ++++++++++---------
 .../VirtualizedTable/VirtualizedTable.tsx     | 38 +++++-----
 2 files changed, 60 insertions(+), 54 deletions(-)

diff --git a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
index beaef77ae4..0f02bb1b6f 100644
--- a/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
+++ b/frontend/src/component/common/Table/SortableTableHeader/SortableTableHeader.tsx
@@ -12,41 +12,47 @@ export const SortableTableHeader = <T extends object>({
     flex?: boolean;
 }) => (
     <TableHead className={className}>
-        {headerGroups.map((headerGroup) => (
-            <TableRow {...headerGroup.getHeaderGroupProps()} data-loading>
-                {headerGroup.headers.map((column: HeaderGroup<T>) => {
-                    const content = column.render('Header');
+        {headerGroups.map((headerGroup) => {
+            const { key, ...props } = headerGroup.getHeaderGroupProps();
+            return (
+                <TableRow key={key} {...props} data-loading>
+                    {headerGroup.headers.map((column: HeaderGroup<T>) => {
+                        const content = column.render('Header');
 
-                    return (
-                        <CellSortable
-                            // @ts-expect-error -- check after `react-table` v8
-                            styles={column.styles || {}}
-                            {...column.getHeaderProps(
-                                column.canSort
-                                    ? column.getSortByToggleProps()
-                                    : undefined,
-                            )}
-                            ariaTitle={
-                                typeof content === 'string'
-                                    ? content
-                                    : undefined
-                            }
-                            isSortable={Boolean(column.canSort)}
-                            isSorted={column.isSorted}
-                            isDescending={column.isSortedDesc}
-                            maxWidth={column.maxWidth}
-                            minWidth={column.minWidth}
-                            width={column.width}
-                            isFlex={flex}
-                            isFlexGrow={Boolean(column.minWidth)}
-                            // @ts-expect-error -- check after `react-table` v8
-                            align={column.align}
-                        >
-                            {content}
-                        </CellSortable>
-                    );
-                })}
-            </TableRow>
-        ))}
+                        const { key, ...props } = column.getHeaderProps(
+                            column.canSort
+                                ? column.getSortByToggleProps()
+                                : undefined,
+                        );
+
+                        return (
+                            <CellSortable
+                                // @ts-expect-error -- check after `react-table` v8
+                                styles={column.styles || {}}
+                                key={key}
+                                {...props}
+                                ariaTitle={
+                                    typeof content === 'string'
+                                        ? content
+                                        : undefined
+                                }
+                                isSortable={Boolean(column.canSort)}
+                                isSorted={column.isSorted}
+                                isDescending={column.isSortedDesc}
+                                maxWidth={column.maxWidth}
+                                minWidth={column.minWidth}
+                                width={column.width}
+                                isFlex={flex}
+                                isFlexGrow={Boolean(column.minWidth)}
+                                // @ts-expect-error -- check after `react-table` v8
+                                align={column.align}
+                            >
+                                {content}
+                            </CellSortable>
+                        );
+                    })}
+                </TableRow>
+            );
+        })}
     </TableHead>
 );
diff --git a/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx b/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx
index 4bf48d5105..c560eaf7a8 100644
--- a/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx
+++ b/frontend/src/component/common/Table/VirtualizedTable/VirtualizedTable.tsx
@@ -89,27 +89,27 @@ export const VirtualizedTable = <T extends object>({
 
                     prepareRow(row);
 
+                    const { key, ...props } = row.getRowProps({
+                        style: { display: 'flex', top },
+                    });
+
                     return (
-                        <TableRow
-                            hover
-                            {...row.getRowProps({
-                                style: { display: 'flex', top },
+                        <TableRow {...props} hover key={key || row.id}>
+                            {row.cells.map((cell) => {
+                                const { key, ...props } = cell.getCellProps({
+                                    style: {
+                                        flex: cell.column.minWidth
+                                            ? '1 0 auto'
+                                            : undefined,
+                                    },
+                                });
+
+                                return (
+                                    <TableCell key={key} {...props}>
+                                        {cell.render('Cell')}
+                                    </TableCell>
+                                );
                             })}
-                            key={row.id}
-                        >
-                            {row.cells.map((cell) => (
-                                <TableCell
-                                    {...cell.getCellProps({
-                                        style: {
-                                            flex: cell.column.minWidth
-                                                ? '1 0 auto'
-                                                : undefined,
-                                        },
-                                    })}
-                                >
-                                    {cell.render('Cell')}
-                                </TableCell>
-                            ))}
                         </TableRow>
                     );
                 })}