Skip to content

Commit

Permalink
fix: invalid spreading of keys into table rows everywhere (#8551)
Browse files Browse the repository at this point in the history 
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.
  • Loading branch information
@thomasheartman
thomasheartman authored Oct 28, 2024
1 parent 0ff0b2d commit 622998c
Show file tree
Hide file tree
Showing 12 changed files with 176 additions and 86 deletions.
18 changes: 12 additions & 6 deletions frontend/src/component/admin/billing/BillingHistory/BillingHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,13 +104,19 @@ export const BillingHistory: VFC<IBillingHistoryProps> = ({
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell) => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => {
const { key, ...cellProps } =
cell.getCellProps();

return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down
21 changes: 12 additions & 9 deletions ...c/component/changeRequest/ProjectChangeRequests/ChangeRequestsTabs/ChangeRequestsTabs.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -323,16 +323,19 @@ export const ChangeRequestsTabs = ({
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell) => (
<TableCell
{...cell.getCellProps()}
padding='none'
>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => {
const { key, ...cellProps } =
cell.getCellProps();

return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down
18 changes: 12 additions & 6 deletions frontend/src/component/environments/EnvironmentTable/EnvironmentTableSingle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,13 +97,19 @@ export const EnvironmentTableSingle = ({
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell) => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => {
const { key, ...cellProps } =
cell.getCellProps();

return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down
18 changes: 12 additions & 6 deletions frontend/src/component/featureTypes/FeatureTypesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -157,13 +157,19 @@ export const FeatureTypesList = () => {
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell) => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => {
const { key, ...cellProps } =
cell.getCellProps();

return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down
25 changes: 16 additions & 9 deletions ...d/Playground/PlaygroundResultsTable/VariantCell/VariantInformation/VariantInformation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,16 +95,23 @@ export const VariantInformation: VFC<IVariantInformationProps> = ({
}

prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell: any) => (
<TableCell
{...cell.getCellProps()}
style={styles}
>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell: any) => {
const { key, ...cellProps } =
cell.getCellProps();

return (
<TableCell
key={key}
{...cellProps}
style={styles}
>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down
18 changes: 12 additions & 6 deletions ...t/project/Project/CreateProject/NewCreateProjectForm/ConfigButtons/ChangeRequestTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -191,13 +191,19 @@ export const ChangeRequestTable = (props: TableProps) => {
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell) => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => {
const { key, ...cellProps } =
cell.getCellProps();

return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down
18 changes: 12 additions & 6 deletions frontend/src/component/project/Project/ProjectDoraMetrics/ProjectDoraMetrics.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -213,13 +213,19 @@ export const ProjectDoraMetrics = () => {
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell) => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => {
const { key, ...cellProps } =
cell.getCellProps();

return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down
17 changes: 11 additions & 6 deletions ...mponent/project/Project/ProjectSettings/ChangeRequestConfiguration/ChangeRequestTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,13 +251,18 @@ export const ChangeRequestTable: VFC = () => {
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell) => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => {
const { key, ...cellProps } =
cell.getCellProps();
return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down
18 changes: 12 additions & 6 deletions ...ent/EnvironmentHideDialog/ProjectEnvironmentTableSingle/ProjectEnvironmentTableSingle.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,13 +76,19 @@ export const ProjectEnvironmentTableSingle = ({
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell) => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => {
const { key, ...cellProps } =
cell.getCellProps();

return (
<TableCell key={key} {...cellProps}>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down
21 changes: 15 additions & 6 deletions frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,13 +274,22 @@ const ProjectEnvironmentList = () => {
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell) => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => {
const { key, ...cellProps } =
cell.getCellProps();

return (
<TableCell
key={key}
{...cellProps}
>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down
28 changes: 20 additions & 8 deletions frontend/src/component/segments/SegmentTable/SegmentTable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,18 +136,30 @@ export const SegmentTable = () => {
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
const { key, ...rowProps } =
row.getRowProps();
return (
<TableRow
hover
{...row.getRowProps()}
key={key}
{...rowProps}
>
{row.cells.map((cell) => (
<TableCell
{...cell.getCellProps()}
>
{cell.render('Cell')}
</TableCell>
))}
{row.cells.map((cell) => {
const {
key,
...cellProps
} = cell.getCellProps();
return (
<TableCell
key={key}
{...cellProps}
>
{cell.render(
'Cell',
)}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down
42 changes: 30 additions & 12 deletions frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,13 +409,22 @@ export const StrategiesList = () => {
<TableBody {...getTableBodyProps()}>
{rows.map((row) => {
prepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell) => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => {
const { key, ...cellProps } =
cell.getCellProps();

return (
<TableCell
key={key}
{...cellProps}
>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down Expand Up @@ -460,13 +469,22 @@ export const StrategiesList = () => {
<TableBody {...customGetTableBodyProps()}>
{customRows.map((row) => {
customPrepareRow(row);
const { key, ...rowProps } = row.getRowProps();
return (
<TableRow hover {...row.getRowProps()}>
{row.cells.map((cell) => (
<TableCell {...cell.getCellProps()}>
{cell.render('Cell')}
</TableCell>
))}
<TableRow hover key={key} {...rowProps}>
{row.cells.map((cell) => {
const { key, ...cellProps } =
cell.getCellProps();

return (
<TableCell
key={key}
{...cellProps}
>
{cell.render('Cell')}
</TableCell>
);
})}
</TableRow>
);
})}
Expand Down

0 comments on commit 622998c

Please sign in to comment.