From 622998c62ef7856a78ad8c8b2471cb6412d6ddd0 Mon Sep 17 00:00:00 2001 From: Thomas Heartman Date: Mon, 28 Oct 2024 13:47:22 +0100 Subject: [PATCH] fix: invalid spreading of keys into table rows everywhere (#8551) This commit fixes invalid prop spreading warnings in all the table rows I could find through a quick search in the code base. The issue is that you can't spread the "key" prop into a component. It *must* be an explicit prop. The process is the same everywhere: 1. Instead of spreading `row.getRowProps()` into the component, we extract and split it: `const {key, ...rowProps} = row.getRowProps()`. 2. Do the same thing for cellProps. --- .../billing/BillingHistory/BillingHistory.tsx | 18 +++++--- .../ChangeRequestsTabs/ChangeRequestsTabs.tsx | 21 ++++++---- .../EnvironmentTableSingle.tsx | 18 +++++--- .../featureTypes/FeatureTypesList.tsx | 18 +++++--- .../VariantInformation/VariantInformation.tsx | 25 +++++++---- .../ConfigButtons/ChangeRequestTable.tsx | 18 +++++--- .../ProjectDoraMetrics/ProjectDoraMetrics.tsx | 18 +++++--- .../ChangeRequestTable.tsx | 17 +++++--- .../ProjectEnvironmentTableSingle.tsx | 18 +++++--- .../ProjectEnvironment/ProjectEnvironment.tsx | 21 +++++++--- .../segments/SegmentTable/SegmentTable.tsx | 28 +++++++++---- .../StrategiesList/StrategiesList.tsx | 42 +++++++++++++------ 12 files changed, 176 insertions(+), 86 deletions(-) diff --git a/frontend/src/component/admin/billing/BillingHistory/BillingHistory.tsx b/frontend/src/component/admin/billing/BillingHistory/BillingHistory.tsx index 4bcedac5dd..71de7c4f3c 100644 --- a/frontend/src/component/admin/billing/BillingHistory/BillingHistory.tsx +++ b/frontend/src/component/admin/billing/BillingHistory/BillingHistory.tsx @@ -104,13 +104,19 @@ export const BillingHistory: VFC = ({ {rows.map((row) => { prepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell) => { + const { key, ...cellProps } = + cell.getCellProps(); + + return ( + + {cell.render('Cell')} + + ); + })} ); })} diff --git a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx index fcb3af2415..7dad9ef9eb 100644 --- a/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx +++ b/frontend/src/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx @@ -323,16 +323,19 @@ export const ChangeRequestsTabs = ({ {rows.map((row) => { prepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell) => { + const { key, ...cellProps } = + cell.getCellProps(); + + return ( + + {cell.render('Cell')} + + ); + })} ); })} diff --git a/frontend/src/component/environments/EnvironmentTable/EnvironmentTableSingle.tsx b/frontend/src/component/environments/EnvironmentTable/EnvironmentTableSingle.tsx index 1db478e665..dc17a5114f 100644 --- a/frontend/src/component/environments/EnvironmentTable/EnvironmentTableSingle.tsx +++ b/frontend/src/component/environments/EnvironmentTable/EnvironmentTableSingle.tsx @@ -97,13 +97,19 @@ export const EnvironmentTableSingle = ({ {rows.map((row) => { prepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell) => { + const { key, ...cellProps } = + cell.getCellProps(); + + return ( + + {cell.render('Cell')} + + ); + })} ); })} diff --git a/frontend/src/component/featureTypes/FeatureTypesList.tsx b/frontend/src/component/featureTypes/FeatureTypesList.tsx index 2d9f3953bc..9665dcc559 100644 --- a/frontend/src/component/featureTypes/FeatureTypesList.tsx +++ b/frontend/src/component/featureTypes/FeatureTypesList.tsx @@ -157,13 +157,19 @@ export const FeatureTypesList = () => { {rows.map((row) => { prepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell) => { + const { key, ...cellProps } = + cell.getCellProps(); + + return ( + + {cell.render('Cell')} + + ); + })} ); })} diff --git a/frontend/src/component/playground/Playground/PlaygroundResultsTable/VariantCell/VariantInformation/VariantInformation.tsx b/frontend/src/component/playground/Playground/PlaygroundResultsTable/VariantCell/VariantInformation/VariantInformation.tsx index 5d0ef2042f..a624c46ae1 100644 --- a/frontend/src/component/playground/Playground/PlaygroundResultsTable/VariantCell/VariantInformation/VariantInformation.tsx +++ b/frontend/src/component/playground/Playground/PlaygroundResultsTable/VariantCell/VariantInformation/VariantInformation.tsx @@ -95,16 +95,23 @@ export const VariantInformation: VFC = ({ } prepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell: any) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell: any) => { + const { key, ...cellProps } = + cell.getCellProps(); + + return ( + + {cell.render('Cell')} + + ); + })} ); })} diff --git a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTable.tsx b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTable.tsx index b92c791c74..7740c104f7 100644 --- a/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTable.tsx +++ b/frontend/src/component/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTable.tsx @@ -191,13 +191,19 @@ export const ChangeRequestTable = (props: TableProps) => { {rows.map((row) => { prepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell) => { + const { key, ...cellProps } = + cell.getCellProps(); + + return ( + + {cell.render('Cell')} + + ); + })} ); })} diff --git a/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraMetrics.tsx b/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraMetrics.tsx index 5cb9ac384e..c62f63495e 100644 --- a/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraMetrics.tsx +++ b/frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraMetrics.tsx @@ -213,13 +213,19 @@ export const ProjectDoraMetrics = () => { {rows.map((row) => { prepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell) => { + const { key, ...cellProps } = + cell.getCellProps(); + + return ( + + {cell.render('Cell')} + + ); + })} ); })} diff --git a/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestTable.tsx b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestTable.tsx index dd7b0f0af8..4322447a9d 100644 --- a/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestTable.tsx +++ b/frontend/src/component/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestTable.tsx @@ -251,13 +251,18 @@ export const ChangeRequestTable: VFC = () => { {rows.map((row) => { prepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell) => { + const { key, ...cellProps } = + cell.getCellProps(); + return ( + + {cell.render('Cell')} + + ); + })} ); })} diff --git a/frontend/src/component/project/ProjectEnvironment/EnvironmentHideDialog/ProjectEnvironmentTableSingle/ProjectEnvironmentTableSingle.tsx b/frontend/src/component/project/ProjectEnvironment/EnvironmentHideDialog/ProjectEnvironmentTableSingle/ProjectEnvironmentTableSingle.tsx index 9b871f5e93..e7dd4af6bf 100644 --- a/frontend/src/component/project/ProjectEnvironment/EnvironmentHideDialog/ProjectEnvironmentTableSingle/ProjectEnvironmentTableSingle.tsx +++ b/frontend/src/component/project/ProjectEnvironment/EnvironmentHideDialog/ProjectEnvironmentTableSingle/ProjectEnvironmentTableSingle.tsx @@ -76,13 +76,19 @@ export const ProjectEnvironmentTableSingle = ({ {rows.map((row) => { prepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell) => { + const { key, ...cellProps } = + cell.getCellProps(); + + return ( + + {cell.render('Cell')} + + ); + })} ); })} diff --git a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx index d705860fda..39aadda7e8 100644 --- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx +++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx @@ -274,13 +274,22 @@ const ProjectEnvironmentList = () => { {rows.map((row) => { prepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell) => { + const { key, ...cellProps } = + cell.getCellProps(); + + return ( + + {cell.render('Cell')} + + ); + })} ); })} diff --git a/frontend/src/component/segments/SegmentTable/SegmentTable.tsx b/frontend/src/component/segments/SegmentTable/SegmentTable.tsx index df5aeea8aa..649b3cd256 100644 --- a/frontend/src/component/segments/SegmentTable/SegmentTable.tsx +++ b/frontend/src/component/segments/SegmentTable/SegmentTable.tsx @@ -136,18 +136,30 @@ export const SegmentTable = () => { {rows.map((row) => { prepareRow(row); + const { key, ...rowProps } = + row.getRowProps(); return ( - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + {row.cells.map((cell) => { + const { + key, + ...cellProps + } = cell.getCellProps(); + return ( + + {cell.render( + 'Cell', + )} + + ); + })} ); })} diff --git a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx index 06593e98e0..525bbefcc9 100644 --- a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx +++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx @@ -409,13 +409,22 @@ export const StrategiesList = () => { {rows.map((row) => { prepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell) => { + const { key, ...cellProps } = + cell.getCellProps(); + + return ( + + {cell.render('Cell')} + + ); + })} ); })} @@ -460,13 +469,22 @@ export const StrategiesList = () => { {customRows.map((row) => { customPrepareRow(row); + const { key, ...rowProps } = row.getRowProps(); return ( - - {row.cells.map((cell) => ( - - {cell.render('Cell')} - - ))} + + {row.cells.map((cell) => { + const { key, ...cellProps } = + cell.getCellProps(); + + return ( + + {cell.render('Cell')} + + ); + })} ); })}